如何使用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屋！