HTML悬停一个元素时如何影响其他元素

我想做的是，当某个悬停时，它会影响另一个的属性。divdiv

例如，在这个 JSFiddle 演示中，当您将鼠标悬停在它上面时会更改但是我想要的是，当我将鼠标悬停在上时会受到影响。#cubebackground-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>

分割线

网友回答：

如果多维数据集直接在容器内：

#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;   
}

此示例仅有效，因为是的子项。对于更复杂的场景，您需要使用不同的 CSS 或使用 JavaScript。cubecontainer

分割线

网友回答：

使用同级选择器是在将鼠标悬停在给定元素上时设置其他元素样式的通用解决方案，但仅当其他元素跟随 DOM 中的给定元素时，它才有效。当其他元素实际上应该在悬停的元素之前时，我们该怎么办？假设我们要实现一个信号条评级小部件，如下所示：

信号条评级小部件

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

Flexbox得到了95%的现代浏览器的良好支持。

.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>

模板简介：该模板名称为【HTML悬停一个元素时如何影响其他元素】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。