仅在翻转时显示图标

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 }

请注意，您可能希望在div中添加一个CSS类，并将其用于选择器。

或者，如果您希望完全删除范围：

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