Question

看看：

正如所料，将鼠标悬停在中心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。

Answer 2

你不能嵌套div。如果将它们放在一起并设置z-index，则可以使用css来实现此效果。

http://jsfiddle.net/t9znR/

最顶层div的悬停背景？

2 个答案: