Question

Take a look at:

http://jsfiddle.net/PPsHd/

As expected, hovering over the center div triggers the hover events for all the divs. Is there a way to change the background of only the first div under the hovering mouse? That is, hovering over the center div changes only the center div’s color?

edit: This needs to be possible for an arbitrary number of nested divs added by the user and I would be able to do it in javascript, but would prefer a CSS solution.

I’m already using:

(function(){
    var highlightedDiv;
    $(document.body).on('mouseover','div',function(e){
        if(highlightedDiv){
            highlightedDiv.style.backgroundColor='';
        }
        (highlightedDiv=this).style.backgroundColor = 'lightGray';
        e.stopPropagation();
    });
}
)()

​

​

Answer 1

You’re falling foul of event bubbling – I can’t see how you’ll be able to do it just in CSS –

If you’re happy to use a bit of jQuery – you can do it:

$("DIV").bind("hover",function(event){
    $(".Hover").removeClass("Hover");
    $(this).addClass("Hover");     
    event.stopPropagation();
 });

CSS:

div{
    padding-top:50px;
    margin:auto;
    border:1px solid lightGray;
    background:gray;
}
.Hover{
    background:lightGray;
}

The trick is to stop the event bubbling up to the other divs – you can see it in action.