我正在创建一个基于 CSS 的工具提示,该工具提示中将包含大量内容,而不是处于静态位置,我想知道是否有一种简单的方法可以使其在将鼠标悬停在链接上时跟随光标。
这是基于 CSS 的工具提示示例
<div class="couponcode">First Link
<span class="coupontooltip">Content 1</span>
</div>
.couponcode:hover .coupontooltip {
display: block;
}
.coupontooltip {
display: none;
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}
http://jsfiddle.net/q46Xz/ http://jsfiddle.net/q46Xz/
像这样的东西
var tooltip = document.querySelectorAll('.coupontooltip');
document.addEventListener('mousemove', fn, false);
function fn(e) {
for (var i=tooltip.length; i--;) {
tooltip[i].style.left = e.pageX + 'px';
tooltip[i].style.top = e.pageY + 'px';
}
}
FIDDLE http://jsfiddle.net/q46Xz/187/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)