0

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

$(".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()
    })
})
4

3 回答 3

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

编辑：经过审核，您在选择的内容之后将 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/所以你可以测试它。

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

我将我提到的更改添加到小提琴中。你可以看到它在那里工作。

于 2013-01-02T20:01:53.550 回答
0

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

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

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

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

于 2013-01-02T19:23:37.700 回答