Question

在以下HTML中，我想悬停图片h2时将悬停效果应用于标题img。有没有一个css选择器来做到这一点，或者其他方式？

HTML

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

Answer 1

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

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

Answer 2

在纯CSS中实际上没有办法做到这一点。

但是，您可以简单地执行以下操作：

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

然后将：悬停效果应用于a标记。

另一种方式是使用一些javascript。例如，使用jquery选择器.closest()

Answer 3

“是否有 css 选择器来执行此操作？”

这在CSS 尚未的当前状态中不存在（从Selectors Level 3)开始...但是当Selectors Level 4被更广泛地实现时，将会有一个父选择器：

E! > F - "An E element, parent of an F element"

由于模块仍处于工作草案阶段，所以实施这段工作还需要一段时间。

Answer 4

您可以尝试一种简单的解决方法，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
h2 {position: relative; padding-bottom: 100px; line-height: 1.5em;}
h2 img {position: absolute; left: 0; top: 1.5em; width: 100px; height: 100px; background: yellow;}
h2 a:hover {color: red;}
</style>

</head>
<body>

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

</body>
</html>

这是一个粗略的凿成实验，但毫无疑问可以改进。在HTML5中，将标题（和图像）嵌套在a中也是合法的，但我不是那个人的忠实粉丝。

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

4 个答案: