Question

我有一种情况，我想改变我的盒子的颜色，悬停在容器i上找到这个盒子。

我在stackoverflow How to affect other elements when a div is hovered

上通过另一个问题找到了解决方法

但现在我想将盒子的颜色改为第三种选择，当我将盒子本身悬停时。

这是和csp一起使用html。

<body>

<div class="container">container
<div class="box">
box</div>

</div

</body>
</html>

和css。

.container{
background-color:grey;
height: 100px;
width:100px;
}
.container:hover .box{
background-color: aqua;
}
.box{
background-color: blue;
    width:50px;
height: 50px;
}
.box:hover{
background-color: white;
}

这是我尝试这样做的方式，但这不起作用。第一步有效，但我无法获得第三种颜色。

Answer 1

只需更改

.box:hover{
   background-color: white
}

要

.container:hover>.box:hover{
   background-color: white
}

并在此处尝试：http://jsfiddle.net/czmzxd6j/

Answer 2

您必须创建一个更具体的选择器。

您设置的.container:hover .box {...}比.box:hover更具体。

如果您使用.container:hover .box:hover {...}，则问题将得到解决，因为

使用直接儿童选择器不是方式也不是.box（对不起，没有冒犯，但这不是正确的方法。）

CSS完全是为了覆盖，这就是为什么这些东西有时会很糟糕。

每当某些内容无法正确应用时，请自己思考3秒：“还有其他选择器操纵这个可能更具体的元素吗？”。

使用常规选择器!important 任何框中的任何框都会悬停，只要它具有.box:hover类但是这个对于包括.box的其他选择器不适用。

该选择器实际上是更多特定的，因为现在只有.container:hover .box:hover元素 .box元素才能获得悬停。

通过指定常规选择器而不是至少特定选择器，它将被更具体的选择器覆盖，这就是您需要将.container重新添加到选择器的原因

我希望你有意义。
祝你好运！

Answer 3

试试这个：

.box:hover{
background-color: white !important;
}

你可以在这里看到它：https://jsfiddle.net/fusg2o3f/

与父母和孩子在css中盘旋

3 个答案: