如何為靜態背景圖像創建懸停效果？

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/