Jquery LIVE 带有附加功能，正在破坏 MouseOver

Question

代码如下：

<p>Morbi vitae erat. Cras sem lorem, porta ut, aliquam id, porta sed, velit.
Pellentesque scelerisque erat rhoncus nulla. <span class="findme">find me</span>Integer pulvinar, est ut</p>

<script type="text/javascript">
$(document).ready(function() {

    $('.findme').live('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            // do something on mouseover
            $(this).css("background", "red");
            $(this).append('<span id="dropdown">XXX</span>');
        } else {
            // do something on mouseout
            $(this).css("background", "transparent");
            $('#dropdown').remove();
        }
    });

});
</script>

我希望在下一个元素旁边出现一个下拉元素，以允许用户在将鼠标移到上方时更改设置。问题是，当鼠标滚动到 XXX 上时，它会触发鼠标移出，即使它位于 .findme 内部，有什么想法吗？或者有更好的方法来实现这种效果？

Answer 1

这是mouseout 的标准行为。如果您使用的是 jQuery 1.4，那么您应该将 mouseover / mouseout 替换为 mouseenter / mouseleave。

编辑：
一些示例代码：

$(document).ready(function() {

    $('.findme').live('mouseenter', function(event) {
        $(this).css("background", "red");
        $(this).append('<span id="dropdown">XXX</span>');
    }).live('mouseleave', function(event) {
        $(this).css("background", "transparent");
        $('#dropdown').remove();
    });

});

Answer 2

尝试使用 mouseenter 和 mouseleave。

.live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }
);

Answer 3

最终工作正常：

$(".findme").mouseenter(function(){
    // do something on mouseover
    $(this).css("background", "red");
    $(this).append('<span id="dropdown">edit</span>');
}).mouseleave(function(){
    // do something on mouseout
    $(this).css("background", "transparent");
    $('#dropdown').remove();
});

希望这可以帮助其他有类似需求的人。