CSS3-如何使用CSS显示和隐藏div?

在我的脚本中有三个div。 我想在第一行悬停时显示div与<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>,当我悬停在第二行时显示div与class="abc" 否则,我想默认显示div与class="a"

但它永远不会显示带有<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>的div。

<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>
<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链接

mridul asked 2020-08-06T07:04:31Z
4个解决方案
43 votes

要隐藏元素,请使用:

display: none;
visibility: hidden;

要显示元素,请使用:

display: block;
visibility: visible;

区别在于:

可见性控制标签的可见性,visibility处理标签在页面上的空间。

如果您设置了visibility并且不更改display,即使没有看到标签,它仍会占用空间。

multiplatform answered 2020-08-06T07:05:24Z
39 votes

你需要

.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元素,它始终设置为隐藏。

Gabriele Petrioli answered 2020-08-06T07:04:46Z
10 votes

您可以使用以下五种方式中的任何一种来隐藏元素,具体取决于您的要求。

不透明度

.hide {
  opacity: 0;
}

能见度

.hide {
   visibility: hidden;
}

显示

.hide {
   display: none;
}

位置

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

剪切路径

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

要显示使用以下任何一种:不透明度:1;能见度:可见;显示:块;

来源:[https://www.sitepoint.com/five-ways-to-hide-elements-in-css/]

Aamer Shahzad answered 2020-08-06T07:06:14Z
0 votes

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>

脚本代码:

$(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代码:

.hideDiv
{
    display:none;
}
Abhishek Mungekar answered 2020-08-06T07:06:44Z
translate from https://stackoverflow.com:/questions/20598568/how-to-display-and-hide-a-div-with-css