CSS 如何在 DIV 悬停上显示图像/链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1252749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show images/links on DIV hover?
提问by JasonDavis
How can I achieve the affect like here on SO when you hover over a comment:
当您将鼠标悬停在评论上时，我如何才能在 SO 上实现这样的效果：
- an arrow up to vote up
- a flag to mark that message
- if you are the comment author you get option to delete as well
- 向上箭头以投票
- 标记该消息的标志
- 如果您是评论作者，您也可以选择删除
How can I make links and images like that show when hovering over a DIV or even a table cell?
将鼠标悬停在 DIV 甚至表格单元格上时，如何显示这样的链接和图像？
回答by Patrick McElhaney
Try this:
尝试这个：
.comment .button {
visibility: hidden;
}
.comment:hover .button {
visibility: visible;
}
Assuming your HTML is something like this:
假设你的 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>
Andrewnoted that this pure CSS solution won't work in IE6. And as Noelpointed out, hovering just isn't an option in mobile browsers. You can use progressive enhancement to have the buttons always visible in those cases.
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 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.
IE6 会理解第一种样式，隐藏按钮，但不会理解第二种样式，使它们在悬停时再次可见。第三种样式在条件注释中，非 IE 浏览器和 IE7+ 将忽略。它覆盖第一个样式，使按钮始终可见。
回答by Dave Markle
div:hover {
background-image:url('arrow.gif');
}
回答by Anthony
The key to what you are trying to do -- as I think the other answers are saying-- isn't to create the content on hover, but to make it "visible" on hover. It's always there, just not in a way the user can see or interact with. So you'd have something like:
您尝试做的事情的关键——正如我认为其他答案所说的那样——不是在悬停时创建内容，而是在悬停时使其“可见”。它总是在那里，只是不是以用户可以看到或与之交互的方式。所以你会有类似的东西：
<div class="vote_arrow">
<a ...>Clicking on me is fun</a>
</div>
and then a CSS rule like:
然后是一个 CSS 规则，如：
.vote_arrow a {
display:none;
}
.vote_arrow:hover a {
display: block;
}
Be aware, though, that this method requires that the user have CSS turned on. Make your hidden content set up in such a way that if I have CSS off, the links still make some amount of sense.
但是请注意，此方法要求用户打开 CSS。以这样的方式设置您的隐藏内容，如果我关闭 CSS，链接仍然有一定的意义。
回答by Andrew Moore
Consider the following HTML:
考虑以下 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>
You can use the following CSS to hide the links:
您可以使用以下 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;
}
Note that this will not work in IE6 since IE6 and below only supports the :hoverpseudo-tag on <a>tags. In which case you'll need to revert back to a JavaScript solution. Example with MooTools:
请注意，这在 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);
