1

我有这个JS代码：

$$('.someclass').each(function(elem) {
    elem.observe('mouseover', function() {
        elem.next().show();
    });

    elem.observe('mouseout', function() {
        elem.next().hide();
    });
});

elem.next() 指向一个具有 display:none 样式的 div。当我将鼠标放在被监视的元素上时，div 显示，但它开始闪烁。当我移动鼠标时，它会疯狂地闪烁。我也尝试使用 mouseenter 和 mouseleave，但结果相同。我希望 div 出现而不是闪烁。当鼠标移出 div 时，它应该会再次消失。这是 HTML：

<div class="someclass">
    <a href="...">
        <img src="...">
    </a>
</div>
<div style="display: none;">my div that should not blink</div>

知道可能出了什么问题吗？

4

2 回答 2

0

由于 HTML 的结构，mouseout 和 mouseover 事件会不断触发。

因为您在 div 中有 a<a href>和 a <img>，所以您正在观察 mouseover 事件从这些元素中冒出并击中 div 上的观察者。也因为从技术上讲，光标不在<div>mouseout 事件触发的顶部。

我将这个http://jsfiddle.net/pkA5n/放在一起，并在我的 Windows 桌面 (IE10/Chrome/Firefox) 上可用的所有浏览器中进行了尝试，我没有看到任何闪烁。

于 2013-07-24T14:54:29.213 回答
0

问题是因为您在观察到的对象中有内部元素。当您在 div 上输入时鼠标悬停会触发，但是当您将鼠标放在图像上时它会触发 mouseout，因为鼠标悬停就是这样工作的。

另一种解决方案不是像 Geek Num 88 那样观察 div 的所有子项，而是将 mouseout 更改为 mouseleave并将mouseover 更改为 mouseenter

于 2017-01-13T11:44:32.697 回答