是否有一个CSS选择器来选择html中的某个元素？

一尘不染

是否有一个CSS选择器来选择html中的某个元素？

css

在以下HTML中，我想h2在图像悬停时将悬停效果应用于标题img。是否有CSS选择器可以执行此操作？

的HTML

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

阅读 270

2020-05-16

共1个答案

一尘不染

更新：主题说明符似乎已从Selectors Level 4规范的 编辑者草案（2014年5月6日）中 删除。这样就无法使用CSS来实现这一目标。

选择器级别4引入了主题说明符，该说明符允许：

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

2020-05-16