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