1

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

HTML

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

4 回答 4

5

更新：主题说明符似乎已从选择器级别 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, "");
});
于 2013-04-29T14:04:07.310 回答
2

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

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

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

然后将 :hover 效果应用于a标签。

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

于 2013-04-29T14:18:06.437 回答
1

“有没有一个CSS选择器可以做到这一点？ ”

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

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

不幸的是，由于该模块仍处于工作草案阶段，这将需要相当长的时间才能实施。

于 2013-04-29T14:04:14.523 回答
-1

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

<!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.

于 2013-04-29T14:29:16.923 回答