悬停在 div 上，悬停在 div 上

Question

我有一个 div 附在另一个 div 中。其中两个具有悬停效果。当我在另一个 div 上时，是否可以取消父 div 悬停效果？

这里的例子：当我的鼠标悬停在蓝色 div 上时，我想取消悬停在红色 div 上而不改变我的层次结构。

.div1:hover{
    background:yellow;
}
.div2:hover{
    background:green;
}

Answer 1

由于 CSS 中没有父选择器，您可以使用变通方法并在 .div2 悬停时将红色轮廓应用到 .div2 并将 overflow: hidden 设置为 .div1 , 例如

.div1 {
    ...
    overflow: hidden;
}

.div2 {
   ...
}

.div1:hover{
   ...
}

.div2:hover {
    ...
    outline: 999em red solid ;
}

示例：http://jsfiddle.net/924zuneu/

使用这种方法，当您悬停 .div2 时，外部 div 仍然应用黄色背景，但轮廓会覆盖它。

另一种方法是设置 .div2 的伪元素的样式，例如

.div1 {
    ...
    position: relative;
    z-index: 1;
}

.div2 {
   ...
}

.div1:hover {
   ...
}

.div2:hover{
   ...
}

.div2:hover:before {
   content    : "";
   background : red;
   position   : absolute;
   z-index    : -1;
   pointer-events: none;
   top: 0; left: 0; right: 0; bottom: 0;
}

这里需要 pointer-events 否则当你离开 .div2 时你将看不到 .div1

的悬停效果

示例：http://jsfiddle.net/kr4453bj/3/

结果（两种方法）

当 .div1 悬停时

当 .div2 悬停时

Answer 2

可能对你有用

.div1 {
width:200px;
height:200px;
background-color:red;
}
.div2 {
width:50px;
height:50px;
background-color:blue;
position:absolute;
top:0px;
}
.div1:hover {
background:yellow;
}
.div2:hover {
background:green;
}
body {
margin:0;
}

Answer 3

没有干净的CSS-唯一的方法来做到这一点。如果你想要一个 jQuery 方法，你可以这样做：

$('.div2').hover(function (e) {
    e.stopPropagation()
    $(this).addClass('green')
}, function () {
    $(this).removeClass('green')
})
$('.div1').mouseover(function () {
    $(this).addClass('yellow')
}).mouseout(function () {
    $(this).removeClass('yellow')
})

.div1 {
    width:200px;
    height:200px;
    background-color:red;
}
.div2 {
    width:50px;
    height:50px;
    background-color:blue;
}
.yellow {
    background:yellow;
}
.green {
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
    <div class="div2"></div>
</div>

悬停在 div 上，悬停在 div 上

Hover on a div, in a div with hover

css

jquery

hover