javascript - jQuery悬停在卡在无限循环中的元素/开始闪烁的元素

请在下面查看我的代码。我想要的是：


我所有的物品都绝对放好了
当我将鼠标悬停在item1上时，我希望item2，item3显示
当我将鼠标悬停在item2上时，我想隐藏item3
当我单击item2时，当item3仍处于隐藏状态时，我将执行某些功能


在下面的代码中，如果将鼠标悬停在item2上，它将开始闪烁item2和item3。

我究竟做错了什么？

jsFiddle：

http://jsfiddle.net/z9Unk/53/

的HTML

<div class="item1">
  item1
</div>
<div class="item2">
    item2
</div>
<div class="item3">
    item3
</div>

CSS：

item1 {
    position:absolute;
    width:150px;
    height:150px;
    background-color:red;
    top:5%;
}

.item3, .item2 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    top:8%;
    left:1%;
    display:none;
}

.item3 {
    top:18%;
}

JS：

var item1 = $(".item1");
var item2 = $(".item2");
var item3 = $(".item3");

item1.hover(
    function() {
      item2.show();
      item3.show();
    },
    function() {
      item2.hide();
      item3.hide();
    }

);

item2.hover(
    function() {
      item3.hide();
    },
    function() {
    }

);

item2.click(
    function() {
        alert("Perform some function");
    }
);

最佳答案

<div class="item1">
  item1
    <div class="item2">
        item2
    </div>
    <div class="item3">
        item3
    </div>
</div>

你应该重组你的HTML

item2不在item1中，因此当您在item2上移动时，item1的mouseleave将触发，然后触发item1的mouseenter

关于javascript - jQuery悬停在卡在无限循环中的元素/开始闪烁的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15014969/