如何控制我的 <h1> 样式为另一种样式？

Question

大家好，我想通过另一组样式规则来控制我的 <h1> 样式。我知道如何用 JavaScript 做到这一点，但我想知道我是否可以只用 CSS 做到这一点。为了更好地理解我的意思，请查看以下示例：

h1 {
     color: red;
     opacity: 1;
}

#menu:hover {
      /* Styling for menu bar */
      /* How can I control the style of my <h1> here? I tried:
     h1 {
        opacity: 0;
    }
    but this doesn't work... */
}

我希望这能让您了解我正在尝试做什么...CSS 这可能吗？

在此先感谢您的帮助！

Answer 1

#menu:hover + h1 {
    opacity:0;
}

如果您的 H1 在您的菜单下。

Example

Answer 2

在一些特定情况下，您可以根据另一个元素的状态更改一个元素的样式。

情况 1：<h1> 是 #menu

的后代

#menu:hover h1 {
  color:#f00;
}

<div id="menu">
  <h1>Headline</h1>
  <p>Just a paragraph to prove a point</p>
  <div>
    <h1>Another Headline that behaves exactly the same</h1>
  </div>
</div>

情况 2：<h1> 是 #menu

的直系后代

#menu:hover > h1 {
  color:#f00;
}

<div id="menu">
  <h1>Headline</h1>
  <p>Just a paragraph to prove a point</p>
  <div>
    <h1>Another Headline that is not affected</h1>
  </div>
</div>

案例 3：<h1> 是 #menu

的直系继承人（同胞）

#menu:hover + h1 {
  color: #f00;
}

<div id="menu">
  This is the div with the id 'menu', hover over it.
</div>
<h1>Headline</h1>
<p>Just a paragraph to prove a point</p>
<h1>Another Headline that is not affected</h1>

情况 4：<h1> 是 #menu

的任何继承人（兄弟姐妹）

#menu:hover ~ h1 {
  color: #f00;
}

<div id="menu">
  This is the div with the id 'menu', hover over it.
</div>
<h1>Headline</h1>
<p>Just a paragraph to prove a point</p>
<h1>Another Headline that behaves exactly the same</h1>

在任何其他情况下，例如，如果 <h1> 在 #menu 之前，或者它们在不同的容器中，那么你就不走运了，你无法使用 CSS 单独，但也许你可以使用 flexbox 来重新排序你的元素，所以 <h1> 在你的标记中是 #menu 的后继者，但无论如何都会呈现在它上面。

如何控制我的 <h1> 样式为另一种样式？

How can I control my <h1> styling in another styling?

html

javascript

css

styling