給出了兩個標題， Headingh1和 Heading h2。
在h2她身上設定了一個很好的下劃線效果，在滑鼠懸停時會顯示出來。
我希望能夠將滑鼠懸停在h2 以及 上 h1，以便下劃線效果在h2標題下開始。
滑鼠懸停效果在懸停時有效h2，但在懸停時無效h1。
懸停h1在下不會觸發下劃線效果的原因是什么h2？
h2:after {
content: "";
display: block;
width: 10%;
padding-top: 1em;
border-bottom: 4px solid black;
transition: 0.25s;
}
h2:hover:after{ /* Works as expected */
width: 100%;
}
h1:hover h2:after{ /* Broken, does not trigger the h2 underline */
width: 100%;
}<a href="#" >
<hgroup>
<div>
<div>
<h1>Heading One</h1>
</div>
</div>
</hgroup>
</a>
<h2>Heading Two</h2>uj5u.com熱心網友回復：
您撰寫選擇器的方式，它試圖定位作為 h1 子級的 h2，但您的 html 結構并沒有反映這一點。
一種選擇是將選擇器添加到外部a，然后使用 相鄰的兄弟選擇器定位相鄰的 h2
這是一個片段顯示：
h2:after {
content: "";
display: block;
width: 10%;
padding-top: 1em;
border-bottom: 4px solid black;
transition: 0.25s;
}
h2:hover:after {
/* Works as expected */
width: 100%;
}
a:hover h2:after {
/* hover applied to the containing element so we can target the adjacent h2 */
width: 100%;
}<a href="#">
<hgroup>
<div>
<div>
<h1>Heading One</h1>
</div>
</div>
</hgroup>
</a>
<h2>Heading Two</h2>uj5u.com熱心網友回復：
h1:hover h2選擇器必須h2是h1. 您只能為后代元素應用懸停樣式。
uj5u.com熱心網友回復：
由于 h2 沒有嵌套到 h1 中，因此您無法在 css 中訪問它。添加一點javascript就可以了。
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');
h1.addEventListener('mouseenter', () => {
h2.classList.add('active');
})
h1.addEventListener('mouseout', () => {
h2.classList.remove('active');
}) h2:after {
content: "";
display: block;
width: 10%;
padding-top: 1em;
border-bottom: 4px solid black;
transition: 0.25s;
}
h2:hover:after,h2.active:after { /* Works as expected */
width: 100%;
}<a href="#" >
<hgroup>
<div>
<div>
<h1>Heading One</h1>
</div>
</div>
</hgroup>
</a>
<h2>Heading Two</h2>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483147.html