我該如何控制我的 <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在菜單下。

例

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的后繼者，但無論如何都會在其上方呈現。