如何在DIV上显示图像/链接？

Question

当你将鼠标悬停在评论上时,如何在SO上实现这样的效果:

• 一个向上投票的箭头
• 标记该消息的标志
• 如果您是评论作者,您也可以选择删除

当我将鼠标悬停在DIV甚至表格单元格上时,如何制作如此显示的链接和图像？

Answer 1

试试这个:

.comment .button {
   visibility: hidden;
}  

.comment:hover .button {
   visibility: visible;
}  

假设你的HTML是这样的:

<div class="comment">
  <a ...><img class="vote button" ...></a>
  <a ...><img class="flag button" ...></a>
  <a ...><img class="delete button" ...></a>
  <span class="comment-text">...</span>
</div>

Andrew指出,这种纯CSS解决方案在IE6中不起作用.正如Noel指出的那样,在移动浏览器中徘徊不是一个选择.您可以使用渐进增强功能在这些情况下始终显示按钮.

<style type="text/css" media="screen">

.comment .button {
   visibility: hidden;   
}  

.comment:hover .button {
   visibility: visible;
} 

</style> 


<!--[if lt IE 7]>  
<style type="text/css"> 
.comment .button {
  visibility: visible; 
}   
</style>
<![endif]-->    

IE6将理解第一种风格,使按钮隐藏,但不是第二种,使它们在悬停时再次可见.第三种风格是条件评论,非IE浏览器和IE7 +将忽略.它会覆盖第一种样式,使按钮始终可见.