我有以下代码：
<div style="width:100%" align="center">
<img src="./platform-logos-big.png" alt="Icons of platforms we support: Windows Linux and MacOS X" border="0" align="middle" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,0,87,100" href="#Linux" alt="Click here to download Linux version of CloudClient">
<area shape="rect" coords="88,0,195,100" href="#Windows" alt="Click here to download Windows version of CloudClient">
<area shape="rect" coords="196,0,300,100" href="#MacOsX" alt="Click here to download MacOsX version of CloudClient">
</map>
</div>
<div class="WTT">
tooltipWin
</div>
<div class="LTT">
tooltipLin
</div>
<div class="MTT">
tooltipMac
</div>
我想显示我的纯 html 工具提示出现在鼠标顶部并沿着它移动。如何用 jQuery 来做这样的事情？
实际上，您应该为所有工具提示提供一个公共类，并为所有元素提供一个 id，但这对您现有的 HTML 是不利的。
$('.WTT,.LTT,.MTT').css({
position: 'absolute'
}).hide()
$('area').each(function(i) {
$('area').eq(i).bind('mouseover', function(e) {
$('.WTT,.LTT,.MTT').eq(i).css({
top: e.pageY,
left: e.pageX
}).show()
})
$('area').eq(i).bind('mouseout', function() {
$('.WTT,.LTT,.MTT').hide()
})
})
在这里摆弄：http://jsfiddle.net/billymoon/BmxR7/ http://jsfiddle.net/billymoon/BmxR7/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
