Mouseout和mouseleave无法正常工作
嗨我正在使用mouseout和mouseleave方法，但两者都无法正常工作。 我试图解决它，但无法找到解决方案。 我的代码看起来很好，它没有错误所以我想知道为什么它不工作。 这是示例代码链接
$(".chzn-select").chosen() $(function(){ $('a').click(function(){ $('.mydiv').addClass('redbrd') }) $('.redbrd').live('mouseover', function(){ var htm= 'some text' $('body').append(htm) }) $('.redbrd').live('mouseout', function(){ $('#mmt').remove() }) })
问题是事件没有被捕获，因为它们并没有正确地冒泡。
直播取决于适当的事件冒泡。 我认为选择的插件打破了冒泡
试试这个：
$(".chzn-select").chosen() $(function(){ $('a').click(function(){ $('.mydiv').addClass('redbrd') $('.redbrd').live('mouseover',function(){ if($('#mmt').length == 0){ var htm= 'some text'; $('body').append(htm); } }); $('.redbrd').live('mouseout',function(){ $('#mmt').remove(); }); }) })
添加了css：
.mydiv{padding:10px;}
这使得你将鼠标放在足够大的div上，以至于你不会立即进入和退出它。 要在当前示例中看到这一点，请慢慢接近红色边框的右下角，直到您在select和div之间的微小空白处输入div。 然后搬出去。 您将看到它按预期工作。
我把我提到的变化添加到小提琴中。 你可以看到它在那里工作。
看看你的小提琴页面，由于除了这部分之外的代码的复杂性，可能会检测到鼠标事件的一些问题，但是使用它应该可以让你大部分时间：
$(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('some text'); }); $('body').on('mouseleave', '.redbrd', function() { $('.mmt').remove(); }); });
编辑：审核后，您在选择的东西后添加li到页面。
这应该适用于：
$(".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 = '' + $target.text() + ' some text'; $('body').append(htm); } }); $('.redbrd').on('mouseout', function() { $('#mmt').remove(); }); }); });
在这里更新了你的小提琴： http ： //jsfiddle.net/JtQHY/1/所以你可以测试它。
我没有使用live来将事件绑定到函数，而是使用jQuery方法进行mouseover和mouseout 。 在这个例子中，我在包含div中设置了一个span ，它显示鼠标何时进入div并在离开div时隐藏。
您可以将span更改为您要使用的任何元素，并根据需要使用CSS对其进行样式/定位。
这是一个可行的解决方案吗？