在我的脚本中有3个div。当第一行悬停时，我想显示div与类ab，并在第二行悬停时显示div与类abc。否则我想用默认的div来显示div。
但是它从来没有显示div与class a。
HTML：
<a id="f">Show First content!</a> <br/> <a id="s">Show Second content!!</a> <div class="a">Default Content</div> <div class="ab">First content</div> <div class="abc">Second content</div>
CSS：
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}
这是我的问题http://jsfiddle.net/mridulpv/n5fzB/1/的小提琴
解决方法
你需要
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .a,#f:hover ~ .a{
display: none;
}
http://jsfiddle.net/gaby/n5fzB/2/更新演示
您原来的CSS中的问题是，在css选择器中启动一个全新的选择器。它不是组合..所以#f：hover〜.abc，.a意味着#f：hover〜.abc和.a。您设置为显示：无，因此它始终设置为隐藏所有.a元素。
