添加position属性导致mouseenter事件出现bug,为什么?

拉斯戈柏尔的兔子
  • 12

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title></title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box {
        width: 800px;height: 300px;
        border:1px black solid;
        margin: 20px auto;
        position: relative;
    }
    li{list-style: none;}
    .ulTitle {
        width: 200px;height: 200px;
        position: absolute;
        left: 50px;top: 50px;
    }
    .ulTitle li {
        width: 50px;height: 50px;
        background-color: blanchedalmond;
        font-family:'微软雅黑';
        font-size: 8px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    .ulTitle .target {
        background-color: rgb(145, 199, 84);
        .ulImg li{
            display: none;
        }
        .ulImg .show {
            display: block;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
             // 1 监听移入事件
            $('.ulTitle li').mouseenter(function(){
                // 1.1 为移入的当前li添加上ulTitle target类,并取消其他同级元素的此类
                $(this).addClass('ulTitle target')
                $(this).siblings().removeClass('ulTitle target');
                // 1.2 获取所移入li的索引
                var $index = $(this).index();
                // 1.3 获取需展示的图片
                var $img = $('.ulImg li').eq($index);
                // 1.4 展示目标图片,并隐藏其他图片
                $img.addClass('ulImg show');
                $img.siblings().removeClass('ulImg show')
            })




        });
        // 该练习出现bug,为ul添加position属性后,鼠标移入事件高频次多次执行。不会修改。
    </script>
</head>
<body>
    <div id="box">
        <ul class="ulTitle">
            <li class="target">保管箱</li>
            <li>手机</li>
            <li>手环</li>
            <li>电视</li>
        </ul>
        <ul class="ulImg">
            <li class="show"><img src="/2原生动画/img/111.png" alt="" srcset=""></li>
            <li><img src="/2原生动画/img/222.png" alt="" srcset=""></li>
            <li><img src="/2原生动画/img/333.png" alt="" srcset=""></li>
            <li><img src="/2原生动画/img/444.png" alt="" srcset=""></li>
        </ul>
    </div>
</body>
回复
阅读 841
1 个回答
✓ 已被采纳

把ul的class附加到li上,导致样式异常

// 原来
$(this).addClass('ulTitle target')
$(this).siblings().removeClass('ulTitle target');

// 修改后

$(this).addClass('target')
$(this).siblings().removeClass('target');
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏