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

我有一个图标显示在div上方的div上方。我的代码是这样的：CSS链接到悬停时可见的图标

<div class='edit_hover_class'> 
    <!-- some code --> 
</div>

以及相应的CSS文件包含：

.edit_hover_class:hover { 
    background: url("trash.gif") no-repeat scroll right top; 
}

我想一个链接附加到编辑图标，是否可以用普通的CSS？如果是这样，怎么样？

来源

2012-03-08 Appster

我不认为你可以用纯CSS做。将链接放入HTML中有什么问题？ – 2012-03-08 12:27:47

为什么你要隐藏链接呢？ – 2012-03-08 12:38:14

减少混乱。就像这个评论显示'这是一个很棒的评论'或'标记这个评论......'只能在悬停时显示。 – Appster 2012-03-08 12:41:16

可以隐藏的链接，直到悬停，像这样：

<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/

来源

2012-03-08 12:27:14 Curt

不会这也隐藏图像？ – 2012-03-08 12:30:11

@CecilTheodore它将隐藏图标，直到悬停在div上。我相信这是OP所要求的。 – Curt 2012-03-08 12:30:47

那么除非他们把鼠标悬停在垃圾箱上，否则谁能看到垃圾箱？另一种选择是创建2张图片，两张图片都位于另一张的顶部。上面的那个包含在链接中，并且是Display：none。将鼠标悬停在较低的图片上，然后链接显示：块，并且可点击。 – 2012-03-08 12:41:39

-1

我还没有测试这一点，但它值得一试：

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

来源

2012-03-08 12:32:52

这段代码似乎毫无意义。无论如何你都不会看到游标类型或指针事件。 – Curt 2012-03-08 12:34:12

正如我所说，未经测试，但我可以看到你的观点。 – 2012-03-08 12:41:57

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

回答

相关问题