Mouseout 和 mouseleave 不起作用答案

【问题标题】：Mouseout and mouseleave not workingMouseout 和 mouseleave 不起作用
【发布时间】：2012-12-17 03:30:05
【问题描述】：

您好，我正在使用 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()
    })
})

【问题讨论】：

您创建了多个具有相同 id 的 div。也许类是你要找的不是 id。
另外，不要在每行后使用分号。
在您的原始帖子中，您尝试在页面加载时使用 html 中的任何元素都没有的类注册元素上的事件。
是的，我想添加具有单击功能的类，然后在该类上添加 mouseenter 和 mouseleave 事件
@jchand 检查我的更新答案。

标签： jquery

【解决方案1】：

我没有使用 live 将事件绑定到函数，而是使用了 mouseover 和 mouseout 的 jQuery 方法。在这个例子中，我在包含的div 中设置了一个span，当你的鼠标进入div 时显示，当你离开div 时隐藏。

您可以将span 更改为您想使用的任何元素，并根据需要使用 CSS 设置样式/位置。

这是解决您的问题的可行解决方案吗？

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

【讨论】：

他使用直播。所以这里没有问题。
@dystroy 没有元素具有他尝试将事件绑定到页面加载的类。他通过点击链接添加了课程。
@ZackT。这不是一个大问题，但如果您认为我已经删除了点击事件并使用现有类调用事件，请检查更新的代码jsfiddle.net/Dpp8a/2
您的重点是在用户将鼠标悬停在您的选择框上时向他们显示消息吗？
是的，我想在用户悬停自定义选择菜单时显示按摩，当他鼠标移出自定义选择菜单时它应该隐藏

【解决方案2】：

查看您的小提琴页面，由于除了这部分之外的代码的复杂性，检测到鼠标事件可能存在一些问题，但是使用它应该可以让您大部分时间到达那里：

$(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();
    });
});

编辑：经过审核，您在选择的内容之后将 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 = '<div id="mmt">' + $target.text() + ' some text</div>';
                $('body').append(htm);
            }
        });
        $('.redbrd').on('mouseout', function() {
            $('#mmt').remove();
        });
    });
});

在此处更新了您的小提琴：http://jsfiddle.net/JtQHY/1/，以便您可以对其进行测试。

【讨论】：

它不起作用，是否有任何其他方法显示弹出窗口而不是 mouseenter 和 nouseout
我认为我们需要更多详细信息：浏览器的确切版本，您到底看到了什么无效/不理想。而且，也许是功能上更有限的例子（如果可能的话）。
从 .mydiv 中删除填充，然后悬停选择类型。它应该在正文上附加#mmt 并将其鼠标移出，然后它应该删除#mmt。就是这样
我找到了解决方案，实际上选择了使用 mouseenter 和 mouseleave 方法的 jquery 插件。它阻止了 mouseenter 和 mouseout 功能。我将我的功能放入选择的插件中，它可以工作

【解决方案3】：

问题在于事件没有被捕获，因为它们没有完全正确地冒泡。

直播依赖于事件的适当冒泡。我认为选择的插件打破了冒泡

试试这个：

$(".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 足够大，以至于您不会立即进入和退出它。要在您当前的示例中看到这一点，请慢慢接近红色边框的右下角，直到您在 select 和 div 之间的微小空白区域中“输入”div。然后搬出去。您会看到它按预期工作。

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

【讨论】：