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

尝试下面，它的工作。我在那里添加条件所以它只会突出显示最多的孩子。

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'); 
});

突出显示鼠标上的元素

2 个答案: