用css显示和隐藏div [英] Display and hide div with css

问题描述

在我的脚本有3个div。我想在悬停在第一行时使用 class 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; 
} 
  

这是我的问题http://jsfiddle.net/mridulpv/n5fzB/1/

解决方案

div>

您需要

  .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 元素隐藏。

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