Question

快问你们。我知道如何使用选择器在悬停时定位元素，以及如何定位元素兄弟。有没有办法将这些结合起来？

不要担心我为什么要这样做，长话短说，在这种情况下，他们的工作效果更好，而不是针对父母。

这方面的一个很好的例子是以下小提琴。

HTML

<div class="puppy">
    <div class="ducky">
        Boom
    </div>
    <div class="kitty">
        awww, im dead
    </div>
</div>

CSS

.puppy {width:400px;}

.ducky {position:absolute; left:-120px; width:200px; background-color:blue; margin-left:50%;}

.kitty {position:absolute; left:-60px; width:300px; background-color:red; margin-left:50%;}

.kitty:hover ~ .ducky {color:white;}

在上面的示例中，将鼠标悬停在kitty上会将kitty和ducky中单词的颜色更改为白色（如果它符合我的要求）。

我可以找到另一种方法来做到这一点，但是如果能够让它发挥作用，那么这样做会更有效率。请不要Js或jQuery。不需要完成这个。

Answer 1

.puppy {width:400px;}

.ducky {position:absolute; left:-120px; width:200px; background-color:blue; margin-left:50%;}

.kitty {position:absolute; left:-60px; width:300px; background-color:red; margin-left:50%;}

.kitty:hover ~ .dog {color:white;}

看起来大卫打我一拳。这是一个快速的例子，虽然我把它们放在一起。

http://jsfiddle.net/emersive/58MwP/2/

CSS - 在悬停时定位元素及其兄弟

1 个答案: