仅在翻转时显示图标答案

【问题标题】：Shows icons only on rollover仅在翻转时显示图标
【发布时间】：2011-01-07 11:41:46
【问题描述】：

我想在将鼠标悬停在 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;
}

【问题讨论】：

标签： jquery html css

【解决方案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 }

【讨论】：