Mouseout和mouseleave不起作用

Question

嗨我正在使用mouseout和mouseleave方法，但两者都不起作用。我试图修复它，但无法找到解决方案。我的代码看起来很好，它没有错误，所以我想知道它为什么不工作。下面是示例代码link

$(".chzn-select").chosen() 
$(function(){ 
    $('a').click(function(){ 
     $('.mydiv').addClass('redbrd') 
    }) 

    $('.redbrd').live('mouseover', function(){ 
     var htm= '<div id="mmt">some text</div>' 
     $('body').append(htm) 
    }) 
    $('.redbrd').live('mouseout', function(){ 
     $('#mmt').remove() 
    }) 
}) 

Answer 1

而不是使用实况事件结合的功能，我使用jQuery的方法mouseover和mouseout。在这个例子中，我在包含div的地方设置了一个span，它显示您的鼠标何时进入div，并在离开div时隐藏。

如果您愿意，您可以将span更改为您想要使用的任何元素，并使用CSS对其进行样式/定位。

这是一个可行的解决方案，为您的问题？

http://jsfiddle.net/Dpp8a/4/

Answer 2

的问题是，该事件不被抓住，因为他们是不完全正确的冒泡。

活依赖于适当的事件冒泡。我想选择的插件打破了起泡

试试这个：

$(".chzn-select").chosen() 
$(function(){ 
    $('a').click(function(){ 
     $('.mydiv').addClass('redbrd') 

     $('.redbrd').live('mouseover',function(){ 
      if($('#mmt').length == 0){ 
       var htm= '<div id="mmt">some text</div>'; 
       $('body').append(htm);   
      }  

     }); 
     $('.redbrd').live('mouseout',function(){ 
      $('#mmt').remove(); 
     });   


    })   
}) 

随着加入CSS：

.mydiv{padding:10px;} 

这使得您将鼠标悬停在足够大，你是不是马上进入DIV并退出它。要在您当前的示例中看到此效果，请慢慢接近红色边框的右下角，直到您将“div”输入到select和div之间的小空格中。然后搬出去。你会看到它按预期工作。

I added the changes I mentioned to a fiddle.你可以看到它在那里工作。

Answer 3

看你的提琴网页，可能有一些问题，由于来自这部分代码一旁的并发症被检测到的鼠标事件，但是使用应该得到您大多数的方式出现：

$(function() { 
    $(".chzn-select").chosen(); 

    $('a').click(function() { 
     $('.mydiv').removeClass().addClass('redbrd mydiv');// NOTE this is in case your other question comes into play with this one. 
    }); 
    $('body').on('mouseenter', '.redbrd', function() { 
     $('body').append('<div class="mmt">some text</div>'); 
    }); 
    $('body').on('mouseleave', '.redbrd', function() { 
     $('.mmt').remove(); 
    }); 
}); 

编辑：审查后，您添加李在您选择的东西后的页面。

这应该与工作：

$(".chzn-select").chosen(); 
$(function() { 
    $('a').click(function() { 
     $('.mydiv').addClass('redbrd'); 

     $('.redbrd').on('mouseover', 'li', function(e) { 
      var $target = $(e.target); 
      if ($('#mmt').length === 0) { 
       var htm = '<div id="mmt">' + $target.text() + ' some text</div>'; 
       $('body').append(htm); 
      } 
     }); 
     $('.redbrd').on('mouseout', function() { 
      $('#mmt').remove(); 
     }); 
    }); 
}); 

更新您在这里提琴：http://jsfiddle.net/JtQHY/1/这样你就可以对其进行测试。