我有这个HTML代码
<div id="mybox"> aaaaaaa </div>
这是我的css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
问题是如何通过仅使用css而不改变代码结构来隐藏鼠标悬停事件时div(aaaaaaa)的内容
我想我应该在#mybox:hover
下面放一些代码,但我不知道代码
提前感谢您的帮助
答案 0 :(得分:22)
在不更改标记或使用JavaScript的情况下,您几乎必须将文本颜色更改为knut提及,或设置text-indent:-1000em;
IE6不会在除锚元素之外的任何内容上读取:悬停选择器,因此您必须使用类似Dean Edwards' IE7的内容。
实际上,您最好将文字放在某种元素中(例如p
或span
或a
)并在悬停时将其设置为display: none;
答案 1 :(得分:13)
通过使用“visibility”或“display”属性来实现隐藏CSS。虽然两者都取得了类似的结果,但了解差异很有用。
如果您只想隐藏元素但保留其占用的空间,则应使用:
#mybox:hover {
visibility: hidden;
}
如果你想隐藏元素并删除它占用的空间,以便其他元素可以占用它的空间,那么你应该使用:
#mybox:hover {
display: none;
}
还要记住IE6及以下版本不响应:悬停除A标签以外的任何内容。在这种情况下,您需要一些Javascript来更改类名:
document.getElementById('mybox').className = 'hide';
并在CSS中定义“hide”类:
.hide { display: none; }
答案 2 :(得分:5)
您可以使文字颜色与背景颜色相同:
#mybox:hover
{
background-color: red;
color: red;
}
答案 3 :(得分:5)
听起来很傻但字体大小:0;可能只是工作。它对我有用。您可以使用需要显示的子元素轻松覆盖它。
答案 4 :(得分:5)
以下是使用CSS3执行此操作的最简单方法:
#mybox:hover {
color: transparent;
}
无论容器颜色如何,您都可以在悬停时使文字颜色透明。
http://caniuse.com/#feat=css3-colors
干杯! :)
答案 5 :(得分:1)
使用display:none;
实施例
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
答案 6 :(得分:1)
这是一个迟到的答案,但仍然,猜测将颜色设置为透明是最好的选择。
#mybox:hover{
background-color:red;
}
答案 7 :(得分:1)
有很多方法可以做到这一点:
一种方式:
#mybox:hover {
display:none;
}
另一种方式:
#mybox:hover {
visibility: hidden;
}
或者你可以这样做:
#mybox:hover {
background:transparent;
color:transparent;
}
答案 8 :(得分:0)
我会说:
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}
&#13;
<div id="mybox">
This text will disappear on hover
</div>
&#13;
这会隐藏文字,当然,它仍然包含文字,但隐藏文字是一种棘手的方式(make in invisible),但它会很好用
答案 9 :(得分:0)
很抱歉晚了7年,但可以通过以下方式实现:
.your-block{
visibility: hidden;
width: 0px;
height: 0px;
}
这将保留页面上的内容并且不会占用任何空间,而display:none将完全隐藏内容。
如果您需要在div中引用代码但不需要显示代码,则使用上面的代码非常有用。
答案 10 :(得分:0)
不透明度
#mybox:hover {
opacity: 0;
}
答案 11 :(得分:-1)
#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }
虽然应该注意IE6及以下版本,当它不在A标签上时不会听悬停。为此,您必须合并JavaScript以在悬停期间向div添加类。
答案 12 :(得分:-1)
.button {
width: 40px;
height: 40px;
font-size: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%;
}
<button class="button">Поиск</button>