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