Question

我希望绑定到一个元素，并在我覆盖它时添加一个轮廓。问题是，当我将鼠标悬停在嵌套元素上时，也会选择父元素。

当我将鼠标悬停在“5深”时，我应该只围绕该范围而不是所有父母。

我该如何避免这种情况？有点奇怪的用例，但我没有控制标记:)

Answer 1

这种情况正在发生，因为event在body元素之前被冒泡。使用event.stopPropagation()停止事件传播，然后它将仅限制触发事件的元素。

正在使用 demo

Answer 2

<span id="1">
one deep
<span id="2">
    two deep
    <span id="3">
        Three deep
        <span id="4">
            Four Deep
            <span id="5">
                five deep
            </span>
        </span>
    </span>

 $('#5').hover(function() {
     $(this).css('outline', '2px solid red');
    }, 
      function() {
        $(this).css('outline', 'none')
    });

Answer 3

我无法与hover合作。如果你从左到右倾斜，反之亦然，那就不像我想的那样。相反，我这样做似乎运作良好。

http://jsfiddle.net/7uQwr/6/

$('body *').mouseover(function(e) {
    $(this).css('outline', '2px solid red');  
    e.stopPropagation();
});

$('body *').mouseout(function(e) {
    $('span').css('outline', 'none');
});

带有通配符选择器/事件冒泡的嵌套元素

3 个答案: