如何隐藏的div在CSS

内容我有这样的HTML代码如何隐藏的div在CSS

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

，这是我的CSS

#mybox{ 
    background-color:green; 
} 

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

的问题是如何隐藏div的内容（AAAAAAA ）当鼠标悬停事件通过使用CSS而不改变代码的结构我想我应该把一些代码放在但我不知道代码

谢谢提前帮助

来源

2009-04-21 ahmed

语义，你真的会最好关闭使用DIV内的段落或其他元素。 div是一个结构元素，并不是为了直接保存文本。 – 2009-04-21 23:18:09

这是一个难以坚持的语义。谁在这件事上没有罪？ – 2014-11-15 23:14:56

不改变标记或使用JavaScript，你几乎不得不改变文本颜色为knut提到，或设置文本缩进：-1000em;

IE6不会读取：锚定元素以外的其他任何东西的悬停选择器，因此您将不得不使用类似Dean Edwards' IE7之类的东西。

真的不过，你最好把文本中某种元素（如p或span或a）和设置，为display: none;悬停。

来源

2009-04-21 23:16:57

谢谢，text-indent：-1000em;工作得很好，我想我会使用它，关于IE6只是我不支持它，因为它会导致非常复杂的代码，谢谢 – ahmed 2009-04-21 23:23:05

你可以做文字颜色一样的背景色：


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

来源

2009-04-21 23:13:06 knut

这是一个很好的伎俩，但它不会帮助我的情况，因为我想在我的div中使用背景图像，谢谢 – ahmed 2009-04-21 23:14:48

你可以添加一个背景图像悬停与background-image：url（...）no-repeat left top，例如 – 2009-04-21 23:17:51

最棘手的方法:) – M98 2016-07-26 10:14:32

-1

#mybox:hover { display: none; } 
#mybox:hover { visibility: hidden; } 
#mybox:hover { background: none; } 
#mybox:hover { color: green; }

但应当注意的是，IE6及以下不会听悬停时，它不是在一个一个标签。为此，您必须合并JavaScript以在悬停期间向div中添加一个类。

来源

2009-04-21 23:13:37

谢谢，我不打算在我的项目的这个阶段支持IE6，谢谢 – ahmed 2009-04-21 23:24:02

CSS隐藏是通过使用“可见性”或“显示”属性来实现的。虽然两者都取得了相似的结果，但了解其差异很有用。

如果你只想隐藏元素，但保留其所占用的空间，你应该使用：

#mybox:hover { 
    visibility: hidden; 
}

如果你想隐藏的元素，并删除其所占用的空间，让其他元素可以利用它的空间，那么你应该使用：

#mybox:hover { 
    display: none; 
}

还记得IE6及以下不回应：徘徊除A标签的东西。在这种情况下，你需要一些JavaScript来更改类名：

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

，并定义了“隐藏”类CSS：

.hide { display: none; }

来源

2009-04-21 23:22:50 Pras

听起来很愚蠢，但字体大小：0;可能只是工作。它为我做了。你可以轻松地用你需要显示的子元素覆盖它。

来源

2013-01-25 04:08:52 Jack

最好的方法使用display:none;

例

<div id="divSample" class="hideClass">hi..</div> 
<style> 
.hideClass 
{display:none;} 
</style>

来源

2013-08-20 05:33:56

这是一个迟到的回答，但仍，猜颜色设置为透明是最好的选择在HTML/CSS隐藏。

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

来源

2016-03-26 04:27:01 user3782177

我会说：

#mybox{ 
 
    background:green; 
 
} 
 

 
#mybox:hover{ 
 
    color:transparent; 
 
}

<div id="mybox"> 
 
    This text will disappear on hover 
 
</div>

这将隐藏的文本，但当然，它仍然包含了文本，但它是隐藏的文本取巧的方法（使其无效），但它会工作得很好

来源

2016-07-26 10:20:33 M98

对不起，迟到7年，但这可以通过使用以下内容来实现：

.your-block{ 
    visibility: hidden; 
    width: 0px; 
    height: 0px; 
}

这将保持页面上的内容，不会占用任何空间，而display：none将完全隐藏内容。

如果您需要在div中引用代码，但不需要显示它，那么使用上面的代码会很有用。

来源

2016-11-10 16:16:55

这里是CSS3做最简单的方法：

#mybox:hover { 
    color: transparent; 
}

，不管容器的颜色，你可以悬停文本颜色透明的。

http://caniuse.com/#feat=css3-colors

干杯！ :)

来源

2017-01-10 13:27:33 stamat

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

来源

2017-03-30 22:59:04

什么不透明

#mybox:hover { 
    opacity: 0; 
}

来源

2017-09-02 21:12:01 OdkoPP

有很多方法可以做到这一点：
方式一：

#mybox:hover { 
    display:none; 
}

另一种方式：

#mybox:hover { 
    visibility: hidden; 
}

或者你可以只是做：

#mybox:hover { 
    background:transparent; 
    color:transparent; 
}

来源

2018-03-10 22:48:03 Cursor

如何隐藏的div在CSS

回答

相关问题