Выделите элемент при зависании

Question

Я хочу выделить элемент на hover и только этот элемент. Это должно имитировать поведение зависания элемента с помощью инструментов chrome dev, когда вы выбрали лупу. Это для расширения хром, которое я делаю.

Я думаю, что мне нужно решение JS, так как псевдо-зависание в css, похоже, применимо ко всем элементам фона, то есть к элементам контейнера, поэтому мне нужно будет предотвратить событие, пузырящееся в css, что, насколько я может сказать, что вы не можете этого сделать.

Я попытался

$('body').children().mouseover(function(e){ 
    $(".hova").removeClass("hova");  
    $(this).addClass("hova"); 
}).mouseout(function(e) { 
    $(this).removeClass("hova"); 
}); 

-css-

.hova { 
    background-color: pink; 
} 

и зависании Jquery (в), и всегда выбирает контейнер тоже.

Я также пробовал с непрозрачностью css, если фон был закрыт, но, похоже, он всегда выбирает родительский элемент. Я хочу, чтобы самый далекий ребенок спустился по DOM, и я паря его.

Я уверен, что есть какое-то простое решение там, может быть, его более усложняя, как сво в расширении хрома ... Я не уверен,

Answer 1

Это то, что вам нужно? http://jsbin.com/vidojamece/1/

Вместо добавления класс $ (это) внутри обработчика, добавьте класс e.target (диапазон) и возвращают ложь, чтобы он не пузырь до DIV:

$('body').children().mouseover(function(e){ 
    $(".hova").removeClass("hova");  
    $(e.target).addClass("hova"); 
    return false; 
}).mouseout(function(e) { 
    $(this).removeClass("hova"); 
}); 

Answer 2

Вы можете сделать это с помощью CSS (и JS тоже):

*:hover { 
    background-color: pink; 
} 

или даже

div:hover { 
    background-color: pink; 
} 

В ЯШ:

$('body').children().each(function() { 
    $(this).hover(function() { 
     $(".hova").removeClass("hova");  
     $(this).addClass("hova"); 
    }, function() { 
     $(this).removeClass("hova"); 
    }); 
}); 

Answer 3

вы должны использовать элемент целевой вместо «это», который является фактическим элементом, который вы наведите курсор мыши и использовать stopPropagation для того, чтобы не повторить этот процесс для каждого элемента позади:

$('body').children().mouseover(function(e){ 

    e.stopPropagation(); 

    $(".hova").removeClass("hova");  
    $(e.target).addClass("hova"); 
}).mouseout(function(e) { 
    $(e.target).removeClass("hova"); 
});