html - 是否有用于在 html 中选择元素 futherup 的 css 选择器？

Question

在下面的 HTML 中，我想在悬停图像 img 时对标题 h2 应用悬停效果。是否有 css 选择器或其他方式来做到这一点？

HTML

  <article>
      <h2><a href="#">Title</a></h2>
      <a href="#"><img src="#" /></a>
  </article>

Answer 1

更新:主题说明符似乎已从选择器级别 4 规范的编辑草案，2014 年 5 月 6 日中删除。这使得使用 CSS 无法实现此目的。

---

选择器级别 4 介绍了 subject specifier这允许:

!h2 + a img:hover { }

选择<h2> .

据我所知，浏览器支持目前不存在。

您可以在 JavaScript 中模拟它(以下内容未经测试，但应该可以让您了解)。

var img = document.querySelector('h2 + a img');
img.addEventListener('mouseover', function (e) {
    this.parentNode.previousElementSibling.className += " hovered";
});
img.addEventListener('mouseout', function (e) {
    this.parentNode.previousElementSibling.className = this.parentNode.previousElementSibling.className.replace(/\shovered/g, "");
});