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

在下面的 HTML中,我想在悬停图像img时将悬停效果应用于标题h2.有没有一个css选择器来做到这一点,或另一种方式？

HTML

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

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

选择器等级4引入了subject specifier,它允许：

!h2 + a img:hover { }

选择< h2>.

浏览器支持是AFAIK,目前不存在.

你可以在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, "");
});