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

我想做的是，当某个

div

悬停时，它会影响另一个

div

的属性

例如，在中，当您将鼠标悬停在

#cube

上时，它会更改

背景色

，但我想要的是，当我将鼠标悬停在

#container

上时，

#cube

会受到影响

div{
轮廓：1px纯红；
}
#容器{
宽度：200px；
高度：30px；
}
#立方体{
宽度：30px；
身高：100%；
背景色：红色；
}
#立方体：悬停{
宽度：30px；
身高：100%；
背景颜色：蓝色；
}

---

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

#容器：悬停#立方体{
背景颜色：黄色；
}

---

此示例仅适用于

cube

是

container

的子级的情况。对于更复杂的场景，您需要使用不同的CSS，或者使用JavaScript。

如果多维数据集直接位于容器中：

#容器：悬停>#立方体{背景色：黄色；}

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

#容器：悬停+#立方体{背景色：黄色；}

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

#容器：悬停#立方体{背景色：黄色；}

如果多维数据集是容器的同级：

#容器：悬停~#立方体{背景色：黄色；}

非常感谢Mike和Robertc发表的有用文章

如果HTML中有两个元素，并且希望

：将

悬停在其中一个元素上并针对另一个元素的样式更改，则这两个元素必须直接相关--父元素、子元素或兄弟元素。这意味着这两个元素必须是一个在另一个内部，或者两者都包含在同一个较大的元素中

当我的用户浏览我的网站时，我想在浏览器右侧的一个框中显示定义，

：将

悬停在突出显示的术语上；因此，我不希望“definition”元素显示在“text”元素中

我几乎放弃了，只是在我的页面上添加了javascript，但这是未来的该死的！我们不应该忍受来自CSS和HTML的后台sass告诉我们必须将元素放置在何处才能达到我们想要的效果！最后我们妥协了

虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能有效

：悬停

相互指向，但css

position

属性可用于显示任何需要的元素。我使用position:fixed将我的

：hover

操作的目标放在用户屏幕上我想要的位置，而不管它在HTML文档中的位置。

html：

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

在本例中，来自

#explainBox

内元素的

：hover

命令的目标必须是

#explainBox

或也在

#explainBox

内。指定给#定义的位置属性强制它显示在所需位置（在

#explainBox

之外），即使从技术上讲它位于HTML文档中不需要的位置

---

我理解对多个HTML元素使用相同的

#id

被认为是不好的形式；然而，在这种情况下，

#light

的实例可以独立地描述，因为它们各自位于唯一的

#id

'd元素中。在这种情况下，是否有任何理由不重复

id

#light？

当鼠标悬停在给定元素上时，使用同级选择器是设置其他元素样式的一般解决方案，但只有在DOM中的其他元素遵循给定元素时，它才会起作用。当其他元素实际位于悬停元素之前时，我们能做什么？假设我们想要实现一个信号条评级小部件，如下所示：

实际上，使用CSS flexbox模型可以很容易地做到这一点，方法是设置为

reverse

，以便元素以与DOM中元素相反的顺序显示。上面的屏幕截图来自这样一个小部件，使用纯CSS实现

由95%的现代浏览器

.rating{
显示器：flex；
弯曲方向：行反向；
宽度：9雷姆；
}
.差饷物业估价科{
弹性：1；
自对准：柔性端；
背景色：黑色；
边框：0.1rem纯白；
}
.评级部门：悬停{
背景颜色：浅蓝色；
}
.评级部门[数据评级=“1”]{
身高：5雷姆；
}
.评级部门[数据评级=“2”]{
身高：4rem；
}
.评级部门[数据评级=“3”]{
高度：3雷姆；
}
.评级部门[数据评级=“4”]{
高度：2em；
}
.评级部门[数据评级=“5”]{
高度：1公厘；
}
.额定div：悬停~div{
背景颜色：浅蓝色；
}

---

只有这样对我有效：

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

其中

.cube

是

#cube

的CssClass

---

在Firefox、Chrome和Edge

中测试的另一个想法是，您可以在不考虑任何特定选择器的情况下，仅使用主元素的

：hover

状态来影响其他元素

为此，我将依赖于自定义属性（CSS变量）的使用。正如我们可以在下面的文章中看到的：

自定义属性是普通属性，因此可以在 使用正常继承和级联解析任何元素 规则

其思想是在主元素中定义自定义属性，并使用它们来设置子元素的样式，因为这些属性是继承的，所以我们只需要在悬停时在主元素中更改它们

以下是一个例子：

#容器{
宽度：200px；
高度：30px；
边框：1px实心变量（--c）；
--c:红色；
}
#容器：悬停{
--c:蓝色；
}
#容器>分区{
宽度：30px；
身高：100%；
背景色：var（--c
#container:hover .cube { background-color: yellow; }