jquery：嵌套标签和悬停（）在 IE 中不起作用

Question

我有这样的结构：

<div id="container">

<span>
   <span></span>
</span>

<span>
   <span></span>
</span>

</div>

我需要捕获容器的 mouseout 事件，所以我让 jquery 这样做：

$("#container").hover('',function(){ 
alert("Out"); 
});

在 Firefox / Opera 中，它仅在离开 div 时触发 mouseout 函数 （我多么想要它）。

在 IE 中，它会在鼠标点击的 div 内的每个 *-Tag 处触发 mouseout 函数。 （*也许重要的是，span 标签也有 mouseover 和 out 事件）

有人知道如何解决这个问题吗？ （嵌套结构无法更改，因为布局复杂）

thx4任何想法！

Answer 1

@evelio：它不起作用，id始终是“容器”

我如何解决它（到目前为止......）：

无论你相信与否，container-div的属性background-color必须设置为一种颜色。
我仍然对这个事实感到非常震惊，但我尝试了几次，只有CSS中的背景颜色属性决定了它的工作与否。

并且：颜色 #000000 不起作用，任何其他颜色都起作用，包括“白色”

Answer 2

 $("#container").hover('',function(ev){

      alert("Out");
      if( ev.stopPropagation ) { ev.stopPropagation(); } //For 'Good' browsers
      else { ev.cancelBubble = true; } //For IE

 });

另请阅读：事件冒泡和捕获

Answer 3

试试这个

$("#container").mouseleave(function(){ 
alert("Out"); 
});

至于IE，抵制这个蹩脚的浏览器，并在博客上讲述它的绝望，直到你的手指麻木。该浏览器导致网页设计师的时间比应有的时间少了 33% 左右。尽你所能杀死它。

Answer 4

解决这个问题的方法是添加一个 1px 透明 png 作为背景。

请参阅： IE8：Div 悬停仅当设置背景颜色时才有效，很奇怪，为什么？

Answer 5

嗯，我附近没有 IE，但你可以尝试 jQuery mouseout 演示 （以及悬停演示）如果它工作正常似乎是你的代码在其他行中的问题......最后你可以解决它：

$("#container").hover('',function()
{
    //Are you sure?
    if($(this).attr('id') == 'container')
    {
        alert('yup this is container');
    }
});

Answer 6

您是否尝试过：

$("#container").hover('',function(){ 
    alert("Out"); 
    return false;
});

或：

$("#container").hover('',function(e){ 
    if($(e.target).is("#container")){
        alert("Out"); 
        return false;
    }
});

或者更好：

$("#container").mouseout(function(e){ 
    if($(e.target).is("#container")){
        alert("Out"); 
        return false;
    }
});

如果您只需要鼠标移出，则没有理由使用悬停功能。

Answer 7

我在 IE 6、7 和 8 中遇到了类似的问题。Mafka 是对的，必须设置背景颜色才能使其正常工作。如果在“容器”上设置背景颜色不可行，您仍然可以将背景颜色设置为白色并将不透明度设置为 0。

我在绑定之前使用以下 JavaScript 代码完成了此操作jQuery 中的鼠标悬停事件：

if ($.browser.msie) {
    $("#container").css({
        background: '#fff',
        opacity: 0
    });
}