Highlight an element on hover

Question

I want to highlight an element on hover, and only that element. This should mimic the behaviour of hovering over an element with chrome dev tools when you have the magnifying glass selected. It's for a chrome extension I'm making.

I think I need a JS solution, as the pseudo :hover in css seems to apply to all elements in the background, i.e. container elements, so I'd need to prevent event bubbling in css, which as far as I can tell you can't do.

I have tried

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

-css-

.hova {
    background-color: pink;
}

and jquery's hover(), both always selects the container too.

I have also tried with css opacity, incase the background was covered, but it seems it always selects the parent element. I want the furthest child down the DOM that I am hovering over.

I'm sure there's some simple solution out there, maybe its over complicating as its in a chrome extension... I'm not sure

Answer 1

Is this what you need? http://jsbin.com/vidojamece/1/

Instead of adding the class to $(this) inside the handler, add the class to e.target (span) and return false so it doesn't bubble up to the div:

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

Answer 2

You need to use the target element instead of 'this', which is the actual element that you hover over and use stopPropagation in order to not repeat the process for each element behind:

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

    e.stopPropagation();

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