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

Answer 2

div:hover {
    background-image:url('arrow.gif');
}

Answer 3

你要做的事情的关键 - 正如我认为其他答案所说 - 不是在悬停时创建内容，而是在悬停时使其“可见”。它始终存在，只是不是用户可以看到或与之交互的方式。所以你有类似的东西：

 <div class="vote_arrow">
     <a ...>Clicking on me is fun</a>
 </div>

然后是CSS规则，如：

 .vote_arrow a {
     display:none;
  }

  .vote_arrow:hover a {
      display: block;
  }

但请注意，此方法要求用户启用CSS。设置隐藏的内容，如果我关闭CSS，链接仍然有一些意义。

Answer 4

考虑以下HTML：

<div class="special">
    <div class="links_holder">
        <a class="flag" title="Flag" href="flag.html">Flag</a>
    </div>
    <div class="content">
        Hello, this is my content!
    </div>
</div>

您可以使用以下CSS隐藏链接：

div.special div.links_holder {
    float: left;
    width: 16px; /* For a 16x16 link image */
    margin: 0 4px 0 0; padding: 0;
    visibility: hidden;
}

div.links_holder a.flag {
    display: block;
    width: 16px; height: 16px;
    overflow: hidden;

    /* Move the text out of the way 
       It's there for screen readers */
    text-indent: -9999px; 
    background: url('flag.gif') top left no-repeat;
}

div.special:hover div.links_holder {
    visibility: visible;
}

请注意，这在IE6中不起作用，因为IE6及更低版本仅支持:hover标记上的<a>伪标记。在这种情况下，您需要恢复到JavaScript解决方案。 MooTools示例：

$$('div.links_holder a.flag').each(function(el) {
    el.addEvents({
        'mouseenter': function() {
             el.addClass('hover');
         },
         'mouseleave': function() {
             el.removeClass('hover');
         }
    });
}, this);

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

4 个答案: