Html 如何使用 CSS 显示和隐藏 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20598568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display and hide a div with CSS?
提问by mridul
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.
在我的脚本中有三个 div。我想class="ab"在悬停在第一行时显示 div 并class="abc"在悬停在第二行时显示 div 。否则我想class="a"默认显示 div 。
But it never displays the div with class="a".
但它从不显示 div 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>Here is my JSFiddle of my problem: JSFiddle Link
这是我的问题的JSFiddle：JSFiddle Link
采纳答案by Gabriele Petrioli
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 athttp://jsfiddle.net/gaby/n5fzB/2/
在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,.ameans #f:hover ~ .abcand .a. You set that to display:noneso it was always set to be hidden for all .aelements.
原始 CSS 中的问题是,in css 选择器启动了一个全新的选择器。它没有结合......所以#f:hover ~ .abc,.a意味着#f:hover ~ .abc和.a。您将其设置为display:none因此它始终被设置为对所有.a元素隐藏。
回答by multiplatform
To hide an element, use:
要隐藏元素，请使用：
display: none;
visibility: hidden;
To show an element, use:
要显示元素，请使用：
display: block;
visibility: visible;
The difference is:
区别在于：
Visibility handles the visibility of the tag, the displayhandles space it occupies on the page.
Visibility 处理标签的可见性，display处理它在页面上占据的空间。
If you set the visibilityand do not change the display, even if the tags are not seen, it still occupies space.
如果设置了visibility并且不更改display，即使没有看到标签，它仍然占用空间。
回答by Aamer Shahzad
you can use any of the following five ways to hide element, depends upon your requirements.
您可以使用以下五种方法中的任何一种来隐藏元素，具体取决于您的要求。
Opacity
不透明度
.hide {
opacity: 0;
}
Visibility
能见度
.hide {
visibility: hidden;
}
Display
展示
.hide {
display: none;
}
Position
位置
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
clip-path
剪辑路径
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
To show use any of the following: opacity: 1;visibility: visible;display: block;
要显示使用以下任何一项： opacity: 1; 可见性：可见；显示：块；
Source : https://www.sitepoint.com/five-ways-to-hide-elements-in-css/
来源：https: //www.sitepoint.com/five-ways-to-hide-elements-in-css/
回答by Abhishek Mungekar
Html Code :
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 hideDiv">First content</div>
<div class="abc hideDiv">Second content</div>
Script code:
脚本代码：
$(document).ready(function() {
$("#f").mouseover(function(){
$('.a,.abc').addClass('hideDiv');
$('.ab').removeClass('hideDiv');
}).mouseout(function() {
$('.a').removeClass('hideDiv');
$('.ab,.abc').addClass('hideDiv');
});
$("#s").mouseover(function(){
$('.a,.ab').addClass('hideDiv');
$('.abc').removeClass('hideDiv');
}).mouseout(function() {
$('.a').removeClass('hideDiv');
$('.ab,.abc').addClass('hideDiv');
});
});
css code:
css代码：
.hideDiv
{
display:none;
}
