html - 悬停父元素会触发多个元素，包括自身

Question

HTML

h3,
h2 {
  color: green;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

h2:hover,
h3:hover {
  color: red;
}

<ul class="nav justify-content-between">
  <li class="nav-item">
    <h3>Sibling</h3>
  </li>
  <li class="nav-item">
    <h2>Parent</h2>
  </li>
  <li class="nav-item">
    <h3>Sibling</h3>
  </li>
</ul>

是否可以让父标题在悬停在其自身和兄弟标题上时触发颜色变化，但是，当兄弟标题悬停在上面时，它不会触发任何元素？我使用 bootstrap 来设置列表的样式等。 也可以只使用 css 来做到这一点吗？

工作 JSFIDDLE 链接: https://jsfiddle.net/jd9nenwa/6/

Answer 1

检查这段代码。我不得不稍微更改层次结构。

h3,
h2 {
  color: green;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

h2:hover~.heading, h2:hover {
  color: red;
}

  <h2 class="heading">Parent</h2>
  <h3 class="heading">Sibling</h3>
  <h3 class="heading">Sibling</h3>