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

Question

我想隐藏鼠标上的div元素，仅使用css。

<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状态。

当你的CSS没有处于其:hover状态时，你的CSS再次说明什么？

啊是的，display:block。

好的，浏览器再次呈现元素。

嘿，那是什么，那个吓人的鼠标已经结束了？

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

Answer 2

当一个元素有其显示设置为none它不会在布局存在，因此不能使用鼠标进行交互。

只需添加一个包装周围：

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

http://jsfiddle.net/cecAn/