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/