Question

I’d like to show some icons on hovering my mouse over the div – otherwise they should be hidden from view.

Can this be done using pure CSS? Or do I need some javascript?

Thanks!!

ie/

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 }

Note that you might want to add a CSS class to your div and use that for the selector instead.

Alternatively, if you want the span to be completely removed:

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