使用懸停選擇器顯示/隱藏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/