有没有一个CSS选择器在HTML中选择一个元素futherup？ [英] Is there a css selector for selecting an element futherup in the html?

问题描述

在下面的HTML中，当鼠标悬停在图片 img h2 c>。有没有一个CSS选择器来做到这一点，还是另一种方式？

In the following HTML, I want to apply a hover effect to the header h2, upon hover of the image img. Is there a css selector to do that, or another way?

HTML

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

推荐答案

更新：主题说明符似乎已从2014年5月6日选择器4级规范的编辑者草案。

Update: The subject specifier appears to have been removed from the Editor’s Draft, 6 May 2014 of the Selectors Level 4 specification. This leaves no way to achieve this using CSS.

选择器级别4介绍了主题说明符允许：

Selectors Level 4 introduces the subject specifier which allows:

!h2 + a img:hover { }

code>< h2> 。

to select the <h2>.

浏览器支持是，AFAIK，目前不存在。

Browser support is, AFAIK, currently non-existent.

您可以在JavaScript中模拟它（以下是未经测试的，但应该给您的想法）。

You can simulate it in JavaScript (the following is untested, but should give you the idea).

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, "");
});

这篇关于有没有一个CSS选择器在HTML中选择一个元素futherup？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！