html - 子元素悬停，影响父元素

Question

我知道如何制作“父悬停，子 Action ”

.parent:hover > .child{background:#a4d186;}

但如果可能的话我想要这个:

.parent < .child:hover{blabla}

Answer 1

目前还没有这样的选择器，但您可以使用“~”选择器。 以下是 w3.org

的摘录

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

所以你可以这样做:

HTML:

<div class="parent-like-div">Do Something</div>
<div class="to-be-controlled">Control me</div>

CSS:

.parent-like-div:hover ~ .to-be-controlled
{your code apply on .to-be-controlled when you hover .parent-like-div}

http://jsfiddle.net/h7grfeod/