请看下面我的代码。我想要的只是:
- 我所有的元素都是绝对定位的
- 当我将鼠标悬停在 item1 上时,我希望显示 item2、item3
- 当我将鼠标悬停在 item2 上时,我希望隐藏 item3
- 当我点击 item2 时,我在 item3 仍然隐藏时执行一些功能
使用下面的代码,如果我将鼠标悬停在 item2 上,它会开始闪烁 item2 和 item3。
我做错了什么?
jsFiddle:
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/