css – 如何在DIV悬停上显示图像/链接?

前端之家收集整理的这篇文章主要介绍了css – 如何在DIV悬停上显示图像/链接?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当您将鼠标悬停在评论上时,我如何能够实现SO这样的影响:

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

当悬停在DIV甚至桌面单元格上时,我可以如何显示这样的链接和图像?

解决方法

尝试这个:
.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将忽略.它覆盖第一个样式,使按钮始终可见.

原文链接:https://www.f2er.com/css/214352.html

猜你在找的CSS相关文章