javascript - 悬停时元素位置正在改变

Question

我有一个带有文本的 div。我想在悬停 div 而不是光标时创建一个黄色圆圈背景。

这是我目前得到的: JsFiddle Demo

HTML:

<div id="board">
    <div id="ball"></div>
    Lorem ipsum dolor sit....
</div>

JQuery:

$(function(){
    $("#board").mousemove(function(e){
        var ball = $("#ball");
        var ballRadius = parseInt(ball.css("width"))/2;
        var parentOffset = $(this).offset(); 
        var relX = e.pageX - parentOffset.left - ballRadius;
        var relY = e.pageY - parentOffset.top - ballRadius;
        ball.css("top",relY + "px");
        ball.css("left",relX + "px");
        ball.css("display","inline-block");
    });
});

我设法做到了，但是，当鼠标悬停时，我所有的文字都被移动了。

Answer 1

将 position: relative 添加到 #board 并将 #ball 从 position: relative 更改为 position:absolute。