CSS: enlace a un icono visible al pasar el cursor

Question

Tengo un ícono que se muestra arriba, a la derecha de un div al pasar el cursor sobre div. Mi código es así:

<div class='edit_hover_class'> 
    <!-- some code --> 
</div> 

y el archivo CSS correspondiente contiene:

.edit_hover_class:hover { 
    background: url("trash.gif") no-repeat scroll right top; 
} 

Quiero adjuntar un enlace al icono de edición, es posible que con CSS sin formato? ¿Si es así, cómo?

Answer 1

Se podría ocultar un enlace hasta el vuelo estacionario, así:

<div class='edit_hover_class'> 
    <a href='#'><img src='icons/trash.gif' /></a> 
</div> 

.edit_hover_class a{ 
    visibility:hidden; 
} 
.edit_hover_class:hover a { 
visibility:visible; 
} 

Ver jsFiddle:

http://jsfiddle.net/Auzm5/

O si sólo desea que el icono para enlazar, el uso de CSS visibility:

http://jsfiddle.net/Auzm5/1/

Answer 2

No he probado esto, pero vale la pena probarlo:

HTML

<div class='edit_hover_class'> 
    <a href='#'><img src='icons/trash.gif' /></a> 
</div> 

CSS

.edit_hover_class a { 
    pointer-events: none; 
    cursor: default; 
} 

.edit_hover_class a:hover { 
    pointer-events: auto; 
    cursor: pointer; 
}