0

我的页面上有这样的 HTML 代码：

<li><img width="100" alt="3Caballeros.png" onmouseover="show_buttons();"</img></li>

基本上，当用户悬停图像时，应该会显示几个按钮。*show_buttons()* 方法应该设置它。这里是 ：

function show_buttons(item){
var parent =$('img[alt="'+item.alt+'"]').parent();
alert(parent.prop('tagName'));    //says LI
parent.find('img').fadeIn();      //shows the other images in the LI (they are added by JavaScript)
item.onmouseover =function () {};   //removes the event listener to the image
parent.mouseout( parent, function(){
    parent.find('img[alt!="'+item.alt+'"]').fadeOut();
});
parent.mouseover( parent, function(){
    parent.find('img[alt!="'+item.alt+'"]').fadeIn();
});

}

使用prepend()方法添加图像，结果类似于：

 <li><img class="first_button" src="images/first.png" style="display: none;">
 <img class="second_button" src="images/second.png" style="display: none;">
 <img width="100" alt="3Caballeros.png" onmouseover="show_buttons();"</img></li>

所以代码几乎没问题：当光标进入 LI 时显示图像，离开时消失。问题是，当光标悬停在 LI 中动态添加的图像之一时，会触发mouseover事件，因此图像会消失。这些图像在 LI 中，为什么会触发事件？

我该如何解决这个问题？谢谢

4

1 回答 1

1

我不知道您的确切设置（没有 CSS 等），但以下更改应该可以解决问题：

// Replace 'parent.mouseout(...' with:
parent.mouseleave(...

// Replace 'parent.mouseover(...' with:
parent.mouseenter(...

另请参见 this SHORT DEMO。

问题的（可能）原因
引用jQuery's docs有关.mouseover()：
“由于事件冒泡，这种事件类型可能会引起很多麻烦。例如，当鼠标指针在此示例中移到内部元素上时，将向该元素发送鼠标悬停事件，然后涓涓细流到 Outer。这会在不合时宜的时候触发我们绑定的鼠标悬停处理程序。

在您的情况下，当从一个图像移动到下一个图像时，会在图像上生成一个 mouseout 事件，然后冒泡到 containsli，从而导致这种意外行为。使用.mouseenter()和.mouseleave()似乎是一个更好的选择！

于 2013-05-25T17:19:18.827 回答