CSS：将鼠标悬停在同一位置的两个元素上

Question

在该代码中，当我尝试更改位于同一位置的两个div的样式时：hover选择器它只影响一个div。我尝试使用z-index，但是不行。我怎么能：同时悬停两个div？谢谢！

http://jsfiddle.net/CqhLr/1/

我需要同时激活两个悬停

#text1:hover #text2#hover

Answer 1

将:hover添加到包含div（#button）而不是每个内部div：http://jsfiddle.net/CqhLr/3/，因此请将当前的鼠标更改为：

#button:hover #text1 {
    opacity: 0;
}
#button:hover #text2 {
    opacity: 1;
}

Answer 2

在http://codepen.io/anon/pen/KEAvg

查看我的笔

将＃text2移到＃text1上方，添加z-indexes，然后更改悬停中的选择器。

Answer 3

您可以使用同级选择器Fiddle，More information on siblings。

执行此操作

#text1 {
    position: absolute;
    top: 25px;
    left: 25px;
    opacity: 1;
    z-index:10;
}
#text1:hover + #text2 {
    opacity: 1;
}
#text1:hover {
    opacity: 0;
}