我正在创建一个基于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;
- }
解决方法
像这样的东西
- 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';
- }
- }
