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，则应使用mouseenter / mouseleave替换mouseover / mouseout。

编辑：一些示例代码：

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

希望这有助于其他有类似需求的人。

带有附加功能的Jquery LIVE打破了MouseOver

3 个答案: