如何使用CSS显示和隐藏div? [英] How to display and hide a div with CSS?
问题描述
在我的脚本中有三个div.当我将鼠标悬停在第一行时,我想用class="ab"
显示div,当我将鼠标悬停在第二行时,我用class="abc"
显示div.否则,我想默认使用class="a"
显示div.
In my script there are three divs. I want to display div with class="ab"
when I hover on first line and display div with class="abc"
, when hover on second line. Otherwise I want to display div with class="a"
by default.
但是它永远不会显示带有class="a"
的div.
But it never displays the div with class="a"
.
.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;
}
<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>
这是我的问题的JSFiddle: JSFiddle链接
Here is my JSFiddle of my problem: JSFiddle Link
推荐答案
您需要
.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
.您将其设置为display:none
,因此对于所有.a
元素,始终将其设置为隐藏.
The problem in your original CSS was that the ,
in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a
means #f:hover ~ .abc
and .a
. You set that to display:none
so it was always set to be hidden for all .a
elements.
这篇关于如何使用CSS显示和隐藏div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!