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

我不是一个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。

我会继续研究这个问题，如果我找到答案会发布，但我真的很感谢你们可能提供的任何见解。感谢您的时间和见解！

来源

2011-10-04 DroBuddy

您可以使用CSS的'：hover'伪类，IE6只适用于''元素，所以您需要使用JavaScript。你是否反对使用类似jQuery的库（它有自己的[hover]（http://api.jquery.com/hover/）函数）？ – nnnnnn

你有没有试过jQuery .hover（）方法。有关更多信息，请参阅[here]（http://api.jquery.com/hover/） –

您提到的jQuery .hover（）方法看起来很容易实现，但我如何定位类而不是元素？ – DroBuddy