Наведите указатель мыши на верхний div?

Question

Взгляните на:

http://jsfiddle.net/PPsHd/

Как и ожидалось, парящий над центром DIV запускает данные события для всех дивы. Есть ли способ изменить фон только первого div под нависшей мышью? То есть, зависание над центром div изменяет только цвет центра div?

Редактировать: Это должно быть возможным для произвольного количества вложенных div, добавленных пользователем, и я мог бы сделать это в javascript, но предпочел бы решение CSS.

Я уже использую:

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

Answer 1

Вы падаете фол пропускания события - я не могу видеть, как вы будете в состоянии сделать это только в CSS -

Если вы счастливы использовать немного Jquery - вы можете это сделать:

$("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; 
} 

Хитрость заключается в том, чтобы остановить событие барботирования до других дивы - вы can see it in action.

Answer 2

Вы не можете вложить div. Если вы кладете их друг над другом и устанавливаете z-index, вы можете использовать css для этого эффекта.

http://jsfiddle.net/t9znR/