当您悬停在评论上时,如何实现与此处相似的效果:
- 箭头向上投票
- 标记该消息的旗帜
- 如果您是评论作者,则还可以选择删除
如何在悬停在DIV甚至表格单元格上时显示链接和图片?
当您悬停在评论上时,如何实现与此处相似的效果:
如何在悬停在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指出的那样,在移动浏览器中悬停并不是一个选项。在这些情况下,您可以使用渐进增强(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+将忽略它。它覆盖了第一种样式,使按钮始终可见。
div:hover {
background-image:url('arrow.gif');
}
<div class="vote_arrow">
<a ...>Clicking on me is fun</a>
</div>
然后是类似这样的CSS规则:
.vote_arrow a {
display:none;
}
.vote_arrow:hover a {
display: block;
}
考虑以下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>
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;
}
<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);