元素位置正在改变悬停

我有一个文本的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"); 
    }); 
});

我能做到，但是，当徘徊，我所有的文字都在转移。

来源

2014-01-28 Itay Gal

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

来源

2014-01-28 18:04:13 mash

问题在于你的定位。 DEMO

#board{ 
    position:relative; 

#ball{ 
    position: absolute;

的原因是，相对定位只是让你走动事情top和left但仍因素影响它的兄弟姐妹的布局和定位。位置，绝对最终会做同样的事情，但它会从布局中移除该元素，所以它不会影响其任何兄弟或其他人的位置。

相对和绝对定位的另一件事是他们使元素为offsetParent。换言之，包含在其中的其他绝对或相对定位的元素将基于该元素进行定位。因此，您需要使#board相对或绝对，以便#ball的定位将基于#board。

PS。当存储对jQuery对象var ball = $('#ball);的引用时，将其考虑为一个将$放在变量上的好习惯。所以... var $ball = $('#ball);。这样其他开发人员可以轻松地确定哪些变量实际上是jQuery对象。

来源

2014-01-28 18:04:41 Fresheyeball

你会想这两个球板位置设置为absolute

#board{ 
    position:absolute; 
    margin: 0 auto; 
    margin-top: 50px; 
    padding: 15px; 
    width: 500px; 
    height: 300px; 
    border: 1px solid black; 
    overflow: hidden; 
    cursor: none; 
    font-size: 20px; 
} 

#ball{ 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    background-color: yellow; 
    border-radius: 100%; 
    top: -50px; 
    left: -50px; 
    display: none; 
    z-index: -1; 
    /* transition: all 0.1s; 
    -webkit-transition: all 0.1s;*/ 
}

http://jsfiddle.net/Zt7h3/18/

来源

2014-01-28 18:05:52 captainrad

我设法改变它一点。

http://jsfiddle.net/Zt7h3/19/

var relY = e.pageY - parentOffset.top - ballRadius - $(this).height();

我把球格在底部，再减去div的高度，以确定当前的Y.

来源

2014-01-28 18:09:52

元素位置正在改变悬停

回答

相关问题