css - 如何在 DIV 悬停时显示图像/链接？

Question

当您将鼠标悬停在评论上时，我如何才能实现像这里这样的效果:

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

当鼠标悬停在 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 会理解第一种样式，使按钮隐藏，但不会理解第二种样式，使它们在悬停时再次可见。第三种样式在 conditional comment 中，非 IE 浏览器和 IE7+ 将忽略。它覆盖了第一种样式，使按钮始终可见。