jquery - 鼠标悬停时突出显示元素

Question

我在构建元素荧光笔时遇到问题（当鼠标悬停在元素上时，突出显示该元素）。

我认为这是由于子父元素的问题（显然，如果鼠标在子元素上，则仅应突出显示子元素），这是 JSfiddle：http: //jsfiddle.net/TVtz7/

那是JS

function highlight(elem,action) {
    if (action) {
        elem.css('border','1px solid red');
    }
    else {
        elem.css('border','');
    }
}
$('#body_wrapper *').mouseenter(function(e) {
    highlight($(this),1);

});
$('#body_wrapper *').mouseout(function(e) {
    highlight($(this),0);
});

Answer 1

使用以下代码。

function highlight(elem,action, e) {
    if (action) {
        elem.css('border','1px solid red');
    }
    else {
        elem.css('border','');
    }
 e.preventDefault();
e.StopPropagation();
}

Answer 2

试试下面，它的工作。我在那里添加了条件，因此它只会突出显示大多数 div 的孩子。

function highlight(elem,action, e) {
    if (action) {
        elem.css('border','1px solid red');
    }
    else {
        elem.css('border','');
    }
 e.preventDefault();
}

$('#body_wrapper *').mouseenter(function(e) {

    if($('.current-highlighted').length == 0){  
        $(this).addClass('current-highlighted');
        highlight($(this),1,e);
    }

});
$('#body_wrapper *').mouseout(function(e) {

    highlight($(this),0,e);
    $(this).removeClass('current-highlighted'); 
});