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

Question

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

我想做的是当一个人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>

Answer 4

除了其他答案中已经提供的通用选择器之外，您现在可以:has()在我们没有父/子或兄弟关系的情况下依赖。

这是一个例子：

.box {
  width: 200px;
  aspect-ratio: 1;
  display: inline-block;
  border: 1px solid red;
}

.box > div {
  margin: 5px;
  height: 100%;
  border: 2px solid green;
  cursor: pointer;
}
/* when div1 is hovered make div2 blue */
body:has(#div1:hover) #div2 {
  background: blue;
}
/* when div2 is hovered make div1 purple */
body:has(#div2:hover) #div1 {
  background: purple;
}

<div class="box">
  <div id="div1">
  </div>
</div>

<div class="box">
  <div id="div2">
  </div>
</div>

正如您所看到的，我们可以div1通过悬停来影响div2，反之亦然。

Answer 5

这是另一个想法，它允许您在不考虑任何特定选择器的情况下仅使用:hover主元素的状态来影响其他元素。

为此，我将依赖于自定义属性（CSS 变量）的使用。正如我们在规范中所读到的：

自定义属性是普通属性，因此它们可以在任何元素上声明，使用正常的继承和级联 规则解决...

这个想法是在主元素中定义自定义属性并使用它们来设置子元素的样式，由于这些属性是继承的，我们只需要在悬停时在主元素中更改它们。

下面是一个例子：

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

为什么这比使用特定选择器结合悬停更好？

我可以提供至少 2 个原因使这种方法成为一个值得考虑的好方法：

1. 如果我们有许多共享相同样式的嵌套元素，这将避免我们复杂的选择器在悬停时定位所有元素。使用自定义属性，我们只需在悬停在父元素上时更改值。
2. 自定义属性可用于替换任何属性的值及其部分值。例如，我们可以定义颜色的自定义属性，我们使用它内的border，linear-gradient，background-color，box-shadow等，这将避免我们悬停正在重置所有这些属性。

下面是一个更复杂的例子：

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

正如我们在上面看到的，我们只需要一个 CSS 声明就可以改变不同元素的许多属性。

Answer 6

非常感谢Mike和Robertc的有用帖子!

如果你的HTML中有两个元素,而你想要:hover超过一个元素并且另一个元素中的样式更改,那么这两个元素必须直接相关 - 父母,孩子或兄弟姐妹.这意味着这两个元素必须是一个在另一个内部,或者必须都包含在同一个更大的元素中.

当用户通过我的网站阅读并:hover突出显示的条款时,我想在浏览器右侧的框中显示定义; 因此,我不希望'definition'元素显示在'text'元素中.

我几乎放弃了,只是添加了javascript到我的页面,但这是未来的dang吧!我们不应该忍受来自CSS和HTML的后退,告诉我们在哪里放置元素以实现我们想要的效果!最后我们妥协了.

虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能成为彼此的有效:hover目标,但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>

css:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

在此示例中,:hover来自元素内的元素的命令的目标#explainBox必须是#explainBox或者也在其中#explainBox.分配给#definitions的位置属性强制它出现在所需位置(外部#explainBox),即使它在技术上位于HTML文档中不需要的位置.

我理解,#id对于多个HTML元素使用相同的形式被认为是不好的形式; 然而,在这种情况下,#light由于它们各自在独特#id的元素中的位置,可以独立地描述实例.id #light在这种情况下有什么理由不重复吗？

Answer 7

只有这对我有用：

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

.cube的CssClass 在哪里#cube？

在Firefox，Chrome和Edge中进行了测试。