将鼠标悬停在div上，悬停在div中

Question

我在另一个div中有一个div。其中两个有悬停效果。当我在另一个div上时，是否可能无效的父div悬停效果？

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

http://jsfiddle.net/ynj9t2kf/

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

Answer 1

由于CSS中没有父选择器，您可以使用变通方法并在悬停时向.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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

可能对您有用

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