html - 悬停在最上面的div的背景？

Question

看一眼：

http://jsfiddle.net/PPsHd/

正如预期的那样，悬停在中心 div 上会触发所有 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();
    });
}
)()

​</p>

​</p>

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

诀窍是阻止事件冒泡到其他 div - 你可以看到它在行动。

Answer 2

你不能嵌套div。如果将它们相互叠加并设置 z-index，则可以使用 css 实现此效果。

http://jsfiddle.net/t9znR/