Css 问题当我将一个父子元素悬停到另一个父子元素时如何应用更改？

Question

我想做的是，当我将鼠标悬停在 #box 按钮上时，我想在 h1 上添加字体大小是 #h[=17 的子元素=]

#box button:hover+#h #hi {
  color: green;
  font-size: 5rem;
}

#box button:hover~#h #hi {
  color: green;
  font-size: 5rem;
}

<div id="box">
  <button style="height:100px;width:100px;">Hover Me</button>
</div>
<div id="h">
  <h1 id="hi">HI IS THERE...</h1>
</div>

它不起作用.......我知道我必须删除#box但我试图在不删除父元素的情况下这样做...... ...读这个....... 我想做的是当我将鼠标悬停在 button 上时，我想在 h1 上添加字体大小，它是 #h

的子元素

Answer 1

这是因为您使用的 ~ 和 #h 以及 #hi 不是按钮的兄弟。您必须将 #h 父级嵌套在 #box 中才能使它们成为兄弟姐妹，然后使用 > 选择器来定位 #hi.

见下文：

button:hover ~ #h > #hi {
  color: green;
  font-size: 5rem;
}

<div id="box">
  <button style="height:100px;width:100px;">Hover Me</button>
  <div id="h">
    <h1 id="hi">HI IS THERE...</h1>
  </div>
</div>

Css problem how to apply changes when i hover a parents child element to another parents child element?