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。

Answer 2

问题在于你的定位。 DEMO

#board{
    position:relative;

#ball{
    position: absolute;

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

相对和绝对定位的另一个原因是它们使元素成为offsetParent。换句话说，其中包含的其他绝对或相对定位的元素将基于该元素定位。因此，您需要将#board设为相对或绝对，以便#ball的定位基于#board。

PS。存储对jQuery对象var ball = $('#ball);的引用时，将$放在变量上是一种很好的做法。所以... var $ball = $('#ball);。这样，其他开发人员可以轻松地告诉哪些变量实际上是jQuery对象。

Answer 3

您需要将球和棋盘位置都设置为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/

Answer 4

我设法改变了一点。

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

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

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

悬停时元素位置正在改变

4 个答案: