仅在翻滚时显示图标

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 }