当div悬停时如何影响其他元素

Question

当div悬停时如何影响其他元素我认为这是一个非常基本的问题，但我不确定如何做到这一点。我想做的是当一个人div徘徊时，它会影响另一个人的属性div。例如，在这个简单的例子中，当你将鼠标悬停在#cube它上面时，会改变background-color但我想要的是当我将鼠标悬停在上面时#container，#cube会受到影响。div {  outline: 1px solid red;}#container {  width: 200px;  height: 30px;}#cube {  width: 30px;  height: 100%;  background-color: red;}#cube:hover {  width: 30px;  height: 100%;  background-color: blue;}<div id="container">  <div id="cube">  </div></div>

Answer 1

如果立方体直接位于容器内：

#container:hover > #cube { background-color: yellow; }

如果cube位于（容器关闭标记之后）容器旁边：

#container:hover + #cube { background-color: yellow; }

如果多维数据集位于容器内的某个位置：

#container:hover #cube { background-color: yellow; }

如果多维数据集是容器的兄弟：

#container:hover ~ #cube { background-color: yellow; }

Answer 2

在此特定示例中，您可以使用：

#container:hover #cube {
    background-color: yellow;   }

这只是因为cube是孩子的container。对于更复杂的场景，您需要使用javascript。

Answer 3

使用兄弟选择是将鼠标悬停在一个给定的造型时，其他元素的通用的解决方案，但它的工作原理只有在其他元素都遵循DOM中给定的一个。当其他元素实际上应该在徘徊之前，我们能做什么？假设我们想要实现信号栏评级小部件，如下所示：

这实际上可以通过设置flex-direction为使用CSS flexbox模型轻松完成reverse，以便元素以与它们在DOM中的元素相反的顺序显示。上面的截图来自这样的小部件，用纯CSS实现。

95％的现代浏览器都非常支持Flexbox。

.rating {

  display: flex;

  flex-direction: row-reverse;

  width: 9rem;

}

.rating div {

  flex: 1;

  align-self: flex-end;

  background-color: black;

  border: 0.1rem solid white;

}

.rating div:hover {

  background-color: lightblue;

}

.rating div[data-rating="1"] {

  height: 5rem;

}

.rating div[data-rating="2"] {

  height: 4rem;

}

.rating div[data-rating="3"] {

  height: 3rem;

}

.rating div[data-rating="4"] {

  height: 2rem;

}

.rating div[data-rating="5"] {

  height: 1rem;

}

.rating div:hover ~ div {

  background-color: lightblue;

}

<div class="rating">

  <div data-rating="1"></div>

  <div data-rating="2"></div>

  <div data-rating="3"></div>

  <div data-rating="4"></div>

  <div data-rating="5"></div>

</div>