Html 如何在css中隐藏div的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/775060/
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 hide the content of the div in css
提问by ahmed
I have this html code
我有这个 html 代码
<div id="mybox"> aaaaaaa </div>
and this is my css
这是我的 css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code
I think I should put some code under #mybox:hoverbut I don't know the code
问题是如何在鼠标悬停事件时仅使用css而不更改代码结构来隐藏div的内容（aaaaaaa）我想我应该在下面放一些代码#mybox:hover但我不知道代码
Thanks in advance for help
预先感谢您的帮助
回答by Mark Hurd
Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;
在不更改标记或使用 JavaScript 的情况下，您几乎必须像 knut 提到的那样更改文本颜色，或者设置 text-indent: -1000em;
IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.
IE6 不会读取 :hover 选择器在锚元素以外的任何东西上，所以你必须使用像Dean Edwards 的 IE7 之类的东西。
Really though, you're better off putting the text in some kind of element (like por spanor a) and setting that to display: none;on hover.
但实际上，您最好将文本放在某种元素中（如p或span或a）并将其设置为display: none;悬停。
回答by Pras
Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.
通过使用“可见性”或“显示”属性来实现 CSS 隐藏。尽管两者都达到了相似的结果，但了解它们之间的差异还是很有用的。
If you only want to hide the element but retain the space occupied by it, you should use:
如果只想隐藏元素但保留其占用的空间，则应使用：
#mybox:hover {
visibility: hidden;
}
If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:
如果你想隐藏元素并移除它占用的空间，以便其他元素可以占用它的空间，那么你应该使用：
#mybox:hover {
display: none;
}
Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:
还请记住，IE6 及以下版本不响应 :hover 对 A 标签以外的任何内容。在这种情况下，您需要一些 Javascript 来更改类名：
document.getElementById('mybox').className = 'hide';
and define the "hide" class in CSS:
并在 CSS 中定义“隐藏”类：
.hide { display: none; }
回答by stamat
Here is the simplest way to do it with CSS3:
这是使用 CSS3 执行此操作的最简单方法：
#mybox:hover {
color: transparent;
}
regardless of the container color you can make the text color transparent on hover.
无论容器颜色如何，您都可以在悬停时使文本颜色透明。
http://caniuse.com/#feat=css3-colors
http://caniuse.com/#feat=css3-colors
Cheers! :)
干杯! :)
回答by Hyman
sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.
听起来很傻，但字体大小：0；可能只是工作。它对我有用。您可以使用需要显示的子元素轻松覆盖它。
回答by knut
You could make the text color the same as the background color:
您可以使文本颜色与背景颜色相同：
#mybox:hover
{
background-color: red;
color: red;
}
回答by OdkoPP
What about opacity
不透明度怎么样
#mybox:hover {
opacity: 0;
}
回答by Cursor
There are many ways to do it:
One way:
有很多方法可以做到：
一种方法：
#mybox:hover {
display:none;
}
Another way:
其它的办法：
#mybox:hover {
visibility: hidden;
}
Or you could just do:
或者你可以这样做：
#mybox:hover {
background:transparent;
color:transparent;
}
回答by Sushan M
Best way to hide in html/css using display:none;
使用隐藏在 html/css 中的最佳方法 display:none;
Example
例子
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
回答by Sree
This is a late answer but still, guess setting the color to transparent is the best option.
这是一个迟到的答案，但仍然猜测将颜色设置为透明是最好的选择。
#mybox:hover{
background-color:red;
}
回答by Mohammad Kermani
I would say:
我会说：
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}<div id="mybox">
This text will disappear on hover
</div>This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well
这将隐藏文本，但当然，它仍然包含文本，但隐藏文本是一种棘手的方法（使不可见），但它会很好用
