jquery - 仅在鼠标悬停时显示图标

Question

我想在将鼠标悬停在 div 上时显示一些图标 - 否则它们应该从 View 中隐藏。

这可以使用纯 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 }