Question

我有这样的结构：

<div id="container">

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

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

</div>

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

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

在Firefox / Opera中，它只在离开div时触发mouseout-function （我多么想要）。

在IE中，它会在鼠标命中的div内的每个* -Tag处触发mouseout-function。（*可能很重要的是，span标签还有鼠标悬停和事件）

任何人都知道如何解决这个问题？（由于复杂的布局，嵌套结构无法更改）

thx4任何想法！

Answer 1

@evelio：它没有用，id总是“容器”

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

信不信由你，容器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

 });

另请阅读：Event bubbling and capturing

Answer 3

试试这个

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

至于IE，抵制蹩脚的浏览器并制作关于其纯粹无望的博客，直到你的手指麻木。该浏览器负责网页设计师的时间比应有的少33％。你可以用任何方式杀死它。

Answer 4

你可以解决它的方法是添加1px transparant png作为背景。

请参阅：IE8: Div hover only works when background color is set, very strange, why?

Answer 5

Mhhh我没有IE附近，但你可以尝试jQuery mouseout demos（和悬停演示），如果它工作正常似乎是你的代码在其他一些行的麻烦...最后你可以workaroud它用：

$("#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.

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

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

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

7 个答案: