相对于鼠标指针改变 position

Question

我寻找了许多类似的问题，但无法解决我的问题。 在这里，我只粘贴了我的代码中的一个列表项。 我需要在list项上的mousemove事件上创建一个span ，并在鼠标移动时设置其与父级的左偏移量。 由于我从未尝试过任何此类事情，因此我对代码进行了很多实验以实现这一点-

 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 元素放在哪里，但您的代码中有一些问题我会先纠正。 元素的位置相对容易改变。

首先，您 append 鼠标移动 function 中的 span 元素，他们每次触发该事件时都会检查 span 是否已经存在。 将其更改为使用mouseenter事件来创建span 。 其次，您在移动鼠标时为您的链接添加一个新的 mouseleave 处理程序。 和以前一样，在mousemove事件之外创建该处理程序。

关于您的元件的 position，我不确定您希望它出现/跟随您的鼠标在哪里，但您可以轻松地调整我的moveSpan() function 中的offsetX和offsetY变量以适应您的需求。

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

 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>