css - 使用悬停选择器显示/隐藏 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

Why that doesn't work?

这不是很明显吗……？

显示 Div 元素。

您将鼠标移到它上面 - 这会将它置于 :hover 状态。

您说对于它的 :hover 状态，该元素将从呈现的输出中完全删除。

因为它现在“不存在了”，所以鼠标不能再停留在它上面。

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

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

是的，display:block。

OK，浏览器再次渲染该元素。

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

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