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。

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

嘿，那是什么，那只怪异的老鼠已经结束了？

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

Answer 2

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

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

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

http://jsfiddle.net/cecAn/

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

2 个答案: