CSS-链接到悬停时可见的图标答案

【问题标题】：CSS- link to an icon visible on hoverCSS-链接到悬停时可见的图标
【发布时间】：2012-03-25 22:26:17
【问题描述】：

我有一个图标显示在顶部，在 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 吗？如果有，怎么做？

【问题讨论】：

我不认为你可以用纯 CSS 做到这一点。将链接放入 HTML 有什么问题？
为什么还要隐藏链接？
减少混乱。就像此评论仅在悬停时显示“这是一个很棒的评论”或“标记此评论...”。

标签： css hover

【解决方案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/

【讨论】：

这不会也隐藏图像吗？
@CecilTheodore 它将隐藏图标，直到将鼠标悬停在 div 上。我相信这是 OP 所需要的。
那么，除非将鼠标悬停在垃圾桶上，否则谁能看到垃圾桶？另一种选择是创建 2 个图像，两个图像都绝对位于另一个图像的顶部。最上面的一个包含在一个链接中，并且是 Display:none。将鼠标悬停在下方图像上时，链接然后显示：阻止并且是可点击的。
OP 不希望垃圾桶出现，直到 div 悬停在上面。我认为这个脚本不需要改变任何东西。
它们不只是悬停在垃圾桶图标上，而是悬停在整个 div 上。它有更多的代码。

【解决方案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;
}

【讨论】：

这段代码似乎毫无意义。在悬停之前，您不会看到光标类型或指针事件。