僅在翻滾時顯示圖標

Question

我想將鼠標懸停在div上顯示一些圖標 - 否則應將其隱藏起來。

這可以使用純CSS完成？或者我需要一些JavaScript？

謝謝！

即/

HTML：

<div id="text_entry"> 
    <p>Some text here</p> 
    <span class="operations"> 
     <a class="delete" href="">Delete</a> | <a class="edit" href="">Edit</a> 
    </span> 
</div> 

CSS：

.edit{ 
    background: url('images/edit_icon.png') no-repeat; 
} 

.delete{ 
    background: url('images/edit_icon.png') no-repeat; 
} 

.operations{ 
    display: none; 
} 

Answer 1

#text_entry .operations  { visibility:hidden } 
#text_entry:hover .operations { visibility:visible } 

請注意，你可能要一個CSS類添加到您的股利和使用，對於選擇代替。

另外，如果你想跨度被完全刪除：

#text_entry .operations  { display:none } 
#text_entry:hover .operations { display:inline }