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

问题是事件没有被捕获，因为它们并没有正确地冒泡。

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

试试这个：

$(".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.你可以看到它在那里工作。

Answer 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/，以便您可以对其进行测试。

Answer 3

我没有使用live来将事件绑定到函数，而是使用mouseover和mouseout的jQuery方法。在此示例中，我在包含span的{{1}}内设置div，显示鼠标何时进入div并在您离开div时隐藏。

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

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

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

Mouseout和mouseleave无法正常工作

3 个答案: