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

Question

当您悬停在评论上时，如何实现与此处相似的效果：

• 箭头向上投票
• 标记该消息的旗帜
• 如果您是评论作者，则还可以选择删除

如何在悬停在DIV甚至表格单元格上时显示链接和图片？

- JasonDavis

---

别忘了考虑移动用户的需求。在许多移动浏览器中，悬停不是一个选择。尤其是iPhone上的Safari，它与桌面版本有完全不同的交互模式。 - Noel Walters

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指出的那样，在移动浏览器中悬停并不是一个选项。在这些情况下，您可以使用渐进增强（progressive enhancement）来使按钮始终可见。

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

- Patrick McElhaney

---

谢谢，这很有帮助。在Chrome中它运行得很好，但在Firefox中，它总是显示按钮，有什么方法可以修复吗？ - JasonDavis

Firefox的哪个版本？我在3.5.2 / Mac上可以使用。 - Patrick McElhaney

很奇怪，我使用的是相同版本的Windows，但在Firefox上却无法运行。我甚至尝试将您的示例放在自己的页面上以验证没有干扰，但仍然无法工作 =( - JasonDavis

我在 Windows 上使用 3.0.11 版本，并且它可以正常工作。一个朋友刚刚在 Windows 上验证了 3.5.1 版本。这是我用来测试的完整文件：http://pastie.textmate.org/578735 - Patrick McElhaney

Answer 2

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

- Dave Markle

---

那我该如何将链接也制作出来呢？ - JasonDavis

你可以使用CSS选择器a:hover来代替使用<div>，并设置它的宽度、高度和背景图像。同时，你还需要将display:block;设置在其中，因为<a>标签通常是内联元素。 - Dave Markle

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，链接仍然有一定的意义。

- Anthony

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及以下版本仅支持<a>标签上的:hover伪标签。在这种情况下，您需要返回到JavaScript解决方案。使用MooTools的示例：

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

- Andrew Moore