CSS-ссылка на иконку, видимую при наведении

Question

У меня есть значок, который я отображаю сверху справа от div при наведении курсора на div. Мой код такой:

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

И соответствующий файл CSS содержит:

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

Я хочу прикрепить ссылку к значку редактирования, возможно ли это с помощью простого CSS? Если да, то как?

Answer 1

Вы можете скрыть ссылку до парения, например:

<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;
}

См. Jsfiddle:

http://jsfiddle.net/Auzm5/

Или, если вы хотите, чтобы значок связывался, используйте CSS visibility:

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

Answer 2

Я не проверял это, но стоит попробовать:

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;
}