如何在DIV悬停显示图像/链接？ [英] How to show images/links on DIV hover?

问题描述

当您将鼠标悬停在某条评论上时，如何在SO上实现这样的效果：

How can I achieve the affect like here on SO when you hover over a comment:

• li>
  
• 标记该邮件的标志


• 如果您是评论作者，您还可以选择删除

如何将鼠标悬停在DIV或表格单元格上时显示链接和图片？

How can I make links and images like that show when hovering over a DIV or even a table cell?

推荐答案

尝试：

.comment .button {
   visibility: hidden;
}  

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

假设您的HTML类似这样：

Assuming your HTML is something like this:

<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 指出，仅在移动浏览器中悬停不是一个选项。您可以使用渐进增强功能在这些情况下始终显示按钮。

---

Andrew noted that this pure CSS solution won't work in IE6. And as Noel pointed out, hovering just isn't an option in mobile browsers. You can use progressive enhancement to have the buttons always visible in those cases.

<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 +将忽略。它覆盖第一个样式，使按钮始终可见。

IE6 will understand the first style, making the buttons hidden, but not the second, making them visible again on hover. The third style is in a conditional comment, which non-IE browsers and IE7+ will ignore. It overrides the first style, making the buttons visible always.

这篇关于如何在DIV悬停显示图像/链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！