0

我想仅使用 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/

4

2 回答 2

5

为什么这不起作用？

这不是很明显吗……？

显示 Div 元素。

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

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

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

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

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

啊，是的，display:block。

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

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

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

于 2013-03-17T04:36:25.713 回答
2

当一个元素的显示设置为无时，它不存在于布局中，因此无法与鼠标交互。

只需在它周围添加一个包装器：

<div class="wrapper">
    <div class="hidden">Stuff shown on hover</div>
</div>

http://jsfiddle.net/cecAn/

于 2013-03-17T04:37:25.833 回答