css - 将鼠标悬停在孩子身上，影响父母。仅使用 CSS 可能吗？

Question

是否有可能仅在 CSS3 中影响用户将鼠标悬停在其子对象上的父对象？

IE

<div class="random">
<img src="image.png">
</div>

.random img:hover {
   somehow affect .random?
}

我知道使用 JQuery、JS 等很容易做到。但想尽可能地远离 JS。

Answer 1

今天只使用 css 是不可能的，但是如果你想做一些简单的事情，比如当你悬停内部元素时改变父级的背景，你可以使用兄弟来模拟背景。这样，您将能够使用“+”选择器获得结果。

<div class="container">
    <span class="content">something</span>
    <span class="bg"></span>
</div>

但是，要做到这一点，您必须使用绝对定位并处理它的副作用，例如居中和显式尺寸，这是一个示例：http: //jsfiddle.net/PYN6P/