用css显示和隐藏div

用css显示和隐藏div

本文介绍了用css显示和隐藏div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的脚本有3个div。我想在悬停在第一行时使用类ab 显示div,并在悬停在第二行时使用 class abc 显示div。否则,我想用 class a 默认值来显示div。



但是它不会显示类 a / p>

HTML:

 < a id =f>显示第一内容!< / a> 
< br />
< a id =s>显示第二个内容!!< / a>
< div class =a>默认内容< / div>
< div class =ab>第一内容< / div>
< div class =abc>第二个内容< / div>

CSS:

 code> .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;
}

这是我的问题

解决方案

div>

您需要

  .abc,.ab {
display:none;
}

#f:hover〜.ab {
display:block;
}

#s:hover〜.abc {
display:block;
}

#s:hover〜.a,
#f:hover〜.a {
display:none;
}

更新演示





您的原始CSS中的问题是css选择器中的启动了​​一个全新的选择器。因此 #f:hover〜.abc,.a 表示 #f:hover〜.abc .a 。您将其设置为 display:none ,因此它始终设置为对所有 .a 元素隐藏。


In my script there is 3 div. I want to display div with class ab when hover on first line and display div with class abc, when hover on second line. Otherwise I want to diplay div with class a default.

But it never display div with 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;
}

Here is my fiddle of my problem http://jsfiddle.net/mridulpv/n5fzB/1/

解决方案

You need

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Updated demo at http://jsfiddle.net/gaby/n5fzB/2/


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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 03:30