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/