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

我认为这是一个非常基本的问题，但我不确定如何做到这一点。

我想要做的是当某个div被徘徊时，它会影响另一个div的属性。

例如，在这个简单的示例中，当您将鼠标悬停在#cube它会更改background-color但我想要的是当我将鼠标悬停在#container #cube时， #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>

---

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

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

如果多维数据集位于容器旁边（容器关闭标签后）：

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

如果立方体位于容器内的某个位置：

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

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

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

---

在这个特定的例子中，你可以使用：

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

这只适用于cube是container的孩子。 对于更复杂的场景，你需要使用JavaScript。

---

使用兄弟选择器是将鼠标悬停在给定元素上时为其他元素设置样式的常用解决方案， 但只有其他元素遵循DOM中的给定元素时才适用。 当其他元素实际上应该放在悬停之前时，我们可以做些什么？ 假设我们想要实现一个信号栏评级小部件，如下所示：

这实际上可以使用CSS flexbox模型轻松完成，方法是将flex-direction设置为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>

链接地址: http://www.djcxy.com/p/22855.html

上一篇: How to affect other elements when a div is hovered

下一篇: Conditionally set style if sibling element exists in PURE CSS