CSS before 和 float on 不同元素一起工作

【问题标题】：CSS before and float on different elements work togetherCSS before 和 float on 不同元素一起工作
【发布时间】：2015-09-05 23:56:27
【问题描述】：

我想 :hover 一张图片，然后在另一个元素 (h2) 上显示 :before 我该怎么做？

【问题讨论】：

请出示您的代码！
我们必须查看您的 html 代码部分，否则您的问题将因“离题”而被关闭。
字面意思是“仅使用 CSS 是不可能的”，但如果我们能看到您的实际标记，可能会有解决方法。重要的是要知道 H2 是否与图像有任何关系，或者它们在文档中是否相距很远。
没有关系
<h2>Aka Hisfantor</h2> </header> <ul class="profile-social-links">  <li> <a href="http://twitter.com/tutsplus"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg"> </a> </li>

【解决方案1】：

如果您将两个元素都布置为同级元素，则可以使用同级选择器+ 显示它们：

img:hover + h2:before {display: block; width: 100%; height: 2px; background: #f00; content: ' ';}

<img src="http://lorempixel.com/400/200/" />
<h2>Image</h2>

上述解决方案仅在元素相邻或以某种方式相关时才有效，因为 CSS 不能使用父选择器（这在 CSS 4 规范中是可能的）。但这可以使用 jQuery 轻松实现：

$("img").mouseover(function () {
  $("h2:before").css("display", "block");
});

【讨论】：