为什么鼠标悬停在 H1 上不会触发 H2 启动的 CSS 效果？

Question

给定两个标题，标题 h1 和标题 h2。

h2 为她设置了漂亮的下划线效果，鼠标悬停时会显示出来。

我希望能够将鼠标悬停在 h2 以及 h1 上，以便在 [=14= 下开始下划线效果] header.

鼠标悬停效果在悬停在 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>

Answer 1

h1:hover h2 选择器要求 h2 成为 h1 的子选择器。您只能为后代元素应用悬停样式。

Answer 2

您编写选择器的方式试图以作为 h1 子级的 h2 为目标，但您的 html 结构并未反映出这一点。

一个选择是在外部 a 添加一个选择器，然后用 + adjacent sibling selector

定位相邻的 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>

Answer 3

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

为什么鼠标悬停在 H1 上不会触发 H2 启动的 CSS 效果？

Why Mouse Hovering over H1 doest not trigger CSS effect on H2 to start?

css

hover

css-selectors