如何为静态背景图像创建悬停效果？

Question

我不是JS专家，但是我试图找到一种方法，当访问者将鼠标悬停在背景图像上时，使其中的内容带有气泡。 HTML看起来像这样：

<div id="certifications">
        <p class="gold left">Microsoft Gold Partner</p>
        <p class="sdvo center">Service Disabled Veteran Owned Small Business</p>
        <p class="ibm right">IBM Authorized Partner</p>
</div><!-- end #certifications -->

并且，控制该区域的CSS外观如下所示：

#certifications {
height: 111px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
}

#certifications p {
margin-top: 20px;
text-indent: -9999px;
}

#certifications .gold {
background-image: url(images/microsoft-gold.jpg);
background-repeat: no-repeat;
display: inline;
height: 70px;
width: 33%;
float: left;
margin-top: 25px;
padding: 0;
}

#certifications .sdvo {
background-image: url(images/sdvosb.png);
background-repeat: no-repeat;
display: inline;
height: 100px;
width: 30%;
float: left;
margin-left: 20px;
}

#certifications .ibm {
background-image: url(images/partners/IBM.png);
background-repeat: no-repeat;
display: inline;
height: 99px;
width: 31%;
margin-top: 25px;
margin-left: -50px;
}

当有人将鼠标悬停在三个背景图像中的任何一个上时，我都希望出现这种效果（理想情况下仅使用CSS，但是如果我需要使用JS，则没什么大不了的）。 关键是使其向后兼容IE6。

我将继续对此进行研究，如果找到答案，将发布该帖子，但我非常感谢你们可能提供的任何见解。 感谢您的宝贵时间和见解！

Answer 1

我喜欢懒惰的编码，而不是重新发明轮子。 这些家伙已经用许多不同的方式做到了。 http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/