改变相对于鼠标指针的位置

Question

我找了很多类似的问题，但都无法解决我的问题。 这里我只从我的代码中粘贴了一个列表项。我需要在 list 项目上的 mousemove 事件上创建一个 span，并在鼠标移动时从其父级设置其 left-offset。因为我从来没有尝试过任何这样的事情，所以我对代码进行了很多实验来达到这个目的-

document.querySelector("li a").addEventListener("mousemove",(event)=> {

   let span;
   let alreadyHasSpan =    event.target.hasChildNodes().length > 1; //default length=1

   if(!alreadyHasSpan) {
    span = $(`<span class="a-effect"></span>`);
    span.appendTo(event.target);
   }

   let targetLeftPos = event.target.getBoundingClientRect().left;

    span.css("left",`${event.clientX-targetLeftPos}px`);


   $(this).mouseleave(function () { 
    span.remove();
   });
}, false);

a {
  position: relative;
}
.a-effect {
 position: absolute; left: 0;
 height: 100%;
 width: 2%;
 background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="nav-item active">
  <a href="/" class="nav-link">Product</a> 
</li>

在我的浏览器上，span 移动但后面有 尾随符号 -

除了尾随符号外，span也经常漏掉。在这个问题的片段上，显示问题更糟糕。

这是什么问题，我该如何解决？

Answer 1

我不是 100% 确定您要将 span 元素放在哪里，但是您的代码中存在一些问题，我会先更正这些问题。那么元素的位置就比较容易改变了。

首先，您将 span 元素附加到 mousemove 函数中，并在每次事件触发时检查 span 是否已经存在。将其更改为使用 mouseenter 事件创建 span。其次，您每次移动鼠标时都会为 link 添加一个新的 mouseleave 处理程序。与以前一样，在 mousemove 事件之外创建该处理程序。

关于你的元素的位置，我不确定你希望它appear/follow你的鼠标在哪里，但你可以很容易地调整我的 [=] 中的 offsetX 和 offsetY 变量18=] 函数以适应您的需要。

请记住，在定位元素时，计算是基于 a 元素的位置。

function moveSpan( e ) {
 let $el = $(e.target);
 let xPos = e.pageX;
  let yPos = e.pageY;
  let offsetX = $el.width() / 2;
  let offsetY = $el.height() / 2;
  let $span = $el.find('span');
  $span.css({
    'left': (xPos - offsetX) + 'px',
    'top': (yPos - offsetY) + 'px'
  });
}

$('li a').on('mouseenter', function( e ) {
 let span = $('<span />').addClass('a-effect');
  $(this).append( span );
  moveSpan( e );
}).on('mousemove', function( e ) {
 moveSpan( e );
}).on('mouseleave', function( e ) {
 $(this).find('span').remove();
});

ul {
  list-style-type: none;
}
a {
  position: relative;
}

.a-effect {
  position: absolute;
  height: 100%;
  width: 10px;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item active">
    <a href="/" class="nav-link">Product</a>
  </li>
</ul>

Answer 2

根据您的问题，问题是每次鼠标移动时您都会添加一个新的跨度。我猜你只想在鼠标进入时添加它，并在鼠标离开时将其删除。

我已尽量保留您的代码，只更改导致您出现问题的代码。

document.querySelector("li a").addEventListener("mouseenter", (event) => {

  let span;
  let alreadyHasSpan = event.target.childNodes.length > 1; //default length=1

  if (!alreadyHasSpan) {
    span = $(`<span class="a-effect"></span>`);
    span.appendTo(event.target);
  }
});

document.querySelector("li a").addEventListener("mousemove", (event) => {
  let targetLeftPos = event.target.getBoundingClientRect().left;
  if (event.target.childNodes.length > 1) {
    let span = event.target.childNodes[1];
    $(span).css("left", `${event.clientX-targetLeftPos}px`);
  }
});

document.querySelector("li a").addEventListener("mouseleave", (event) => {
  if (event.target.childNodes.length > 1) {
    let span = event.target.childNodes[1];
    span.remove();
  }
});

a {
  position: relative;
}

.a-effect {
  position: absolute;
  left: 0;
  height: 100%;
  width: 2%;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="nav-item active">
  <a href="/" class="nav-link">Product</a>
</li>

改变相对于鼠标指针的位置

changing position relative to mouse pointer

html

javascript

css

jquery

cursor-position