Question

所以回到我的CSS，我想在父div悬停时改变多个div的背景颜色。我基本上做的是从3 div创建一个汉堡包菜单，并希望从黑色改变它的颜色 - ＆gt;徘徊时是白色的。

我目前的解决方案是

.burger_container:hover  .bar1{
  background-color: white;
}
.burger_container:hover  .bar2{
  background-color: white;
}
.burger_container:hover  .bar3{
  background-color: white;
}

我考虑的另一件事是给他们另一个类ID，例如

<div class="bar bar3"></div>，然后能够

.burger_container:hover  .bar{
  background-color: white;
}

对于多个孩子，有更好的方法吗？我的解决方案看起来很笨拙。如果我发布的其中一个解决方案被认为是“正确的方法”，请告诉我。欢呼声，

Answer 1

给出以下HTML

<div class="burger_container">
    <div></div>
    <div></div>
    <div></div>
</div>

您可以使用

更改所有子div

.burger_container:hover div {
    background-color: white;
}

Answer 2

如果这三个孩子是其父母的唯一子女，则可以使用

.burger_container:hover > * {}

如果不是，您可以使用

.burger_container:hover > [class^="bar"] {}

您不需要（也不应该使用）id个类。使用id作为唯一标识符和类作为集合成员标识符。 CSS和JavaScript都针对这种范例进行了优化。

除此之外，您的目标是使用尽可能少的代码完成工作，同时保持其可读性和可维护性。这就是为什么你的版本1真的很糟糕，不仅仅是为了更长，而且因为如果你想稍后改变你需要在3个地方修改它而不是只有一个。遵循相同的原则，如果您发现自己想要为元素的所有子元素添加class，最好向父级添加class并选择.yourClass > *其中{ {1}}是父选择器，.yourClass是子选择器（您可能希望使用比任何（*）更具体的内容。

要将上述所有内容应用于您的案例，并尽可能使用最快的代码，如果您的所有页面中只有一个这样的实例，这就是我认为最佳做法：

#hamburger-icon > div {
  background-color: #fff;
}

Answer 3

您的第二种选择将是最理想的选择。这样做可以保持代码干燥，并为条形添加基类，以便将来使用默认样式。

在父母悬停时设置多个孩子的样式

3 个答案: