Javascript 如何为静态背景图像创建悬停效果。。。?

Javascript 如何为静态背景图像创建悬停效果。。。?,javascript,hover,Javascript,Hover,我不是一个JS的家伙,但我试图找到一种方法,使一个“泡泡”出现在它的内容时,访客鼠标在背景图像。HTML如下所示: <div id="certifications"> <p class="gold left">Microsoft Gold Partner</p> <p class="sdvo center">Service Disabled Veteran Owned Small Business</p>

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


我会继续研究这一点,如果我找到答案,我会发帖,但我真的很感谢你们提供的任何见解。感谢您的时间和洞察力

我喜欢懒散的编码,而不是重新发明轮子。这些人已经用了十几种不同的方法。

您可以使用CSS的
:hover
伪类,但IE6只能在
函数上工作?您是否尝试过jQuery.hover()方法。有关详细信息,请参阅您提到的jQuery.hover()方法看起来很容易实现,但是如何将类作为目标而不是元素?好的,我尝试了jQuery中的.hover()和.tooltip(),但它似乎不起作用。这是我试图实现的目标,但我只是在兜圈子(“我应该如何定位一个类而不是一个元素?”-jQuery有一个选择器的概念,类似于CSS选择器,在这里您可以指定如何选择元素,然后指定要对匹配的任何元素执行的操作。对于CSS,您可以通过ID:“#someid”或类:“.someClass”或html标记“div”等进行选择。