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个元素的样式。

案例1：<h1>是#menu

的后代

＆＃13;

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

＆＃13;

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

＆＃13;

案例2：<h1>是#menu 的直接后裔

＆＃13;

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

＆＃13;

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

＆＃13;

案例3：<h1>是#menu

的直接继承人（兄弟姐妹）

＆＃13;

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

＆＃13;

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

＆＃13;

案例4：<h1>是#menu

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

＆＃13;

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

＆＃13;

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

＆＃13;

在任何其他情况下，例如<h1>在#menu之前或者在不同的容器内，你运气不好，你无法用仅CSS，但也许您可以使用flexbox对元素进行重新排序，因此<h1>是标记中#menu的后继，但无论如何都会在其上方呈现。

如何在另一种样式中控制<h1>样式？</h1>

2 个答案: