如何使用CSS显示和隐藏一个div？

Question

在我的脚本中，有三个 div。 当我将鼠标悬停在第一行上时，我想显示具有 class="ab" 的 div，并且当我将鼠标悬停在第二行上时，显示具有class="abc" 的div。 否则，默认情况下，我想显示具有class="a"的div。但它从不显示具有class="a"的div。

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

- mridul

Answer 1

要隐藏一个元素，请使用：

display: none;
visibility: hidden;

要显示一个元素，使用：

display: block;
visibility: visible;

区别在于：

可见性属性处理标签的可见性，而display属性处理其在页面上占用的空间。

如果设置了可见性属性，但没有更改display属性，则即使未看到该标签，它仍然占据空间。

- multiplatform

---

为什么不直接使用 display: none;？ - pawpaw

当你设置display:none时，“visibility”规则确实是多余的。请注意，切换“display”可能会导致周围的元素移动，因为空间被重新分配。如果不希望出现这种“跳跃”效果，则可能需要使用“visibility”。 - Michael Ekoka

Answer 2

您需要

.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

---

啊，原来他的意思是这样。他本可以直接说“当其他元素被悬停时，隐藏.a”。 - m59

谢谢！它起作用了！但是我仍然不明白为什么我的脚本从来没有显示过类a的div。:( - mridul

@mridul，因为CSS选择器中的逗号,表示一个全新的选择器，而不是组合。所以#f:hover ~ .abc,.a的意思是#f:hover ~ .abc和.a。你将它设置为display:none，所以它一直被隐藏。 - Gabriele Petrioli

谢谢。这个方法有效。我需要在其中一个页面中隐藏Bootstrap的jumbotron类。这是我做的。<style> .jumbotron { display: none; visibility: hidden; } </style> - Arindam Roychowdhury

Answer 3

您可以根据需求使用以下五种方法之一来隐藏元素。

透明度

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

您可以使用以下任意一种方式来进行展示： opacity: 1; visibility: visible; display: block;

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

- Aamer Shahzad

Answer 4

.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>

- Nguyen Anh Vu FPL DN

---

目前您的答案不够清晰，请[编辑]以添加更多细节，帮助其他人了解它如何回答问题。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Community

Answer 5

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

Answer 6

HTML 代码：

<button class="Show">Show</button> 
<button class="Hide">Hide</button>
<button class="toggle">Show &amp; Hide</button>
<div id="target"></div>

CSS 代码：

#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

JavaScript 代码：

    $('.Show').click(function() {
    $('#target').show(200);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
    $('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
    $('.toggle').click(function() {
    $('#target').toggle('slow');
});

- Pawan Kumar

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community