如何在css中隐藏div的内容

Question

我有这个HTML代码

<div id="mybox"> aaaaaaa </div>

这是我的CSS

#mybox{
   background-color:green;
}

#mybox:hover{
   background-color:red;
}

问题是当鼠标悬停事件时,如何通过仅使用css而不改变代码的结构来隐藏div(aaaaaaa)的内容我认为我应该放下一些代码#mybox:hover但我不知道代码

在此先感谢您的帮助

Answer 1

在不更改标记或使用JavaScript的情况下,您几乎必须将文本颜色更改为knut提及,或设置text-indent:-1000em;

IE6不会读取:悬停选择器而不是锚元素,所以你必须使用像Dean Edwards的IE7这样的东西.

实际上,你最好将文本放在某种元素(如p或span或a)中并将其设置为display: none;悬停.

当您仍要显示元素的边框时，这是一个非常方便的技巧，这对于拖放功能非常方便。如果不需要显示任何内容，那么“ visibility：hidden”可能是您最好的选择，因为“ display：none”会分散注意力并导致重排。 (2认同)

Answer 2

通过使用"可见性"或"显示"属性来实现隐藏CSS.虽然两者都取得了类似的结果,但了解差异是有用的.

如果您只想隐藏元素但保留其占用的空间,则应使用:

#mybox:hover {
   visibility: hidden;
}

如果你想隐藏元素并删除它占用的空间,以便其他元素可以占用它的空间,那么你应该使用:

#mybox:hover {
   display: none;
}

还要记住,IE6及以下版本不响应:悬停除A标签以外的任何内容.在这种情况下,您需要一些Javascript来更改类名:

document.getElementById('mybox').className = 'hide';

并在CSS中定义"隐藏"类:

.hide { display: none; }

Answer 3

以下是使用CSS3执行此操作的最简单方法:

#mybox:hover {
  color: transparent;
}

无论容器颜色如何,您都可以在悬停时使文本颜色透明.

干杯! :)

Answer 4

听起来很傻但字体大小:0; 可能只是工作.它对我有用.您可以使用需要显示的子元素轻松覆盖它.

Answer 5

您可以使文本颜色与背景颜色相同:


#mybox:hover
{
  background-color: red;
  color: red;
}