CSS- 链接到悬停时可见的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9617641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS- link to an icon visible on hover
提问by Appster
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
我有一个图标，显示在 div 的顶部，将鼠标悬停在 div 上。我的代码是这样的：
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
对应的css文件包含：
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
我想附加一个链接到编辑图标，是否可以使用纯 css？如果是这样，如何？
回答by Curt
You could hide a link until hover like so:
您可以隐藏链接直到悬停，如下所示：
<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;
}
See jsfiddle:
见jsfiddle：
Or if you only want the icon to link, use CSS visibility:
或者，如果您只想链接图标，请使用 CSS visibility：
回答by Cecil Theodore
I havent tested this but its worth a try:
我还没有测试过这个，但值得一试：
HTML
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}
