javascript – 使CSS工具提示跟随光标

前端之家收集整理的这篇文章主要介绍了javascript – 使CSS工具提示跟随光标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建一个基于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/

解决方法

像这样的东西
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

猜你在找的JavaScript相关文章