Question

我正在尝试仅将边框添加到鼠标所在的元素，但我的代码也是为其父元素添加边框，

我的代码：

jQuery('body').mousemove(function(e){   
var el = e.target;
        jQuery(el).hover(function(){
            jQuery(this).css('outline','solid 2px #000');
        },function(){
            jQuery(this).css('outline','');
        });
});

在这里小提琴： http://jsfiddle.net/howtoplease/gk8t7/

Answer 1

主要问题是使用.hover。 .hover使用事件mouseenter和mouseleave。当您输入子元素时，mouseleave将不会在父元素上触发，因此大纲将保持不变，直到您“离开”父元素和所有子元素。此外，您需要阻止孩子的mouseover传播到父母。

//jQuery('body').mousemove(function(e){ 
    //var el = e.target;
    jQuery('div').mouseover(function (e) {
        e.stopPropagation();
        jQuery(this).css('outline', 'solid 2px #000');
    }).mouseout(function () {
        jQuery(this).css('outline', '');
    });
//});

http://jsfiddle.net/gk8t7/9/

另外，我不太明白你使用body mousemove的原因，这是一个调试工具，你不知道你想要定义哪些元素？

Answer 2

你可以非常简单地做到这一点。为所有元素添加一个类名（在这种情况下，我只使用'div'，因为只有div），它应该获得大纲并将以下事件监听器添加到你的js。

jQuery('div').mousemove(function (e) {
    $el = $(e.target)
    $('div').removeClass('outline')
    $el.addClass('outline')
});

http://jsfiddle.net/gk8t7/12/

Answer 3

如果您不想使用类，请使用jQuery的parents()方法。

$('div').hover(function(e){ 
    $(this).parents().css('outline','');
    jQuery(this).css('outline','solid 2px #000');
},function(){
    $(this).parent('div').css('outline','solid 2px #000');
    jQuery(this).css('outline','');
});

如果你鼠标移出，你实际上已经在父元素上，并且你从来没有从中掏出它，所以你发现父div使用parent()包裹$(this)并给它边界模拟。

示例：http://jsfiddle.net/gk8t7/13/

Answer 4

使用

e.stopPropagation();

不要让它影响父元素。

Answer 5

使用类更改轮廓，否则您永远不知道从哪里删除轮廓：

jQuery('body').mousemove(function (e) {
    var el = e.target;
    $('.outline').removeClass('outline'); //remove outline
    jQuery(el).addClass('outline'); // add outline
});

CSS：

.outline {
    outline: solid 2px #000;
}

演示：http://jsfiddle.net/maniator/UQhVE/

jquery - 仅限当前元素而不是父元素

5 个答案: