使用悬停选择器显示/隐藏 html 元素

Question

我想仅使用 css 在鼠标悬停时隐藏 div 元素。

<div>Stuff shown on hover</div>

div {
    display: block;
    width:100px;
    height:100px;
    border: solid black;
}

div:hover {
    display: none;
}

为什么这不起作用？

如果我想改变 - 例如 - 背景，它工作得很好：

div:hover {
    background-color: red;
}

无法隐藏/显示我正在应用悬停选择器的相同元素？

http://jsfiddle.net/link01/TknA8/

Answer 1

为什么这不起作用？

这不是很明显吗……？

显示 Div 元素。

你将鼠标移到它上面 - 这使它处于它的:hover状态。

你说对于它的:hover状态，元素将从渲染输出中完全删除。

由于它现在“不再存在”，鼠标仍然不能在它上面。

鼠标不再在它上面意味着，元素不再处于:hover状态。

当元素不在它的:hover状态时，你的 CSS 对它说了什么？

啊，是的display:block。

好的，浏览器再次渲染元素。

嘿，那是什么，那该死的老鼠在上面？

让我们看看，这意味着它必须再次删除......