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

​

​

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 - 你 can see it in action .