当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&nbsp;>&nbsp;#cube&nbsp;{&nbsp;background-color:&nbsp;yellow;&nbsp;}如果cube位于（容器关闭标记之后）容器旁边：#container:hover&nbsp;+&nbsp;#cube&nbsp;{&nbsp;background-color:&nbsp;yellow;&nbsp;}如果多维数据集位于容器内的某个位置：#container:hover&nbsp;#cube&nbsp;{&nbsp;background-color:&nbsp;yellow;&nbsp;}如果多维数据集是容器的兄弟：#container:hover&nbsp;~&nbsp;#cube&nbsp;{&nbsp;background-color:&nbsp;yellow;&nbsp;}

Answer 2

在此特定示例中，您可以使用：#container:hover&nbsp;#cube&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;yellow;&nbsp;&nbsp;&nbsp;}这只是因为cube是孩子的container。对于更复杂的场景，您需要使用javascript。

Answer 3

使用兄弟选择是将鼠标悬停在一个给定的造型时，其他元素的通用的解决方案，但它的工作原理只有在其他元素都遵循DOM中给定的一个。当其他元素实际上应该在徘徊之前，我们能做什么？假设我们想要实现信号栏评级小部件，如下所示：这实际上可以通过设置flex-direction为使用CSS flexbox模型轻松完成reverse，以便元素以与它们在DOM中的元素相反的顺序显示。上面的截图来自这样的小部件，用纯CSS实现。95％的现代浏览器都非常支持Flexbox。.rating {&nbsp; display: flex;&nbsp; flex-direction: row-reverse;&nbsp; width: 9rem;}.rating div {&nbsp; flex: 1;&nbsp; align-self: flex-end;&nbsp; background-color: black;&nbsp; border: 0.1rem solid white;}.rating div:hover {&nbsp; background-color: lightblue;}.rating div[data-rating="1"] {&nbsp; height: 5rem;}.rating div[data-rating="2"] {&nbsp; height: 4rem;}.rating div[data-rating="3"] {&nbsp; height: 3rem;}.rating div[data-rating="4"] {&nbsp; height: 2rem;}.rating div[data-rating="5"] {&nbsp; height: 1rem;}.rating div:hover ~ div {&nbsp; background-color: lightblue;}<div class="rating">&nbsp; <div data-rating="1"></div>&nbsp; <div data-rating="2"></div>&nbsp; <div data-rating="3"></div>&nbsp; <div data-rating="4"></div>&nbsp; <div data-rating="5"></div></div>