Adjusting position in relation to the cursor's movements

Question

Adjusting position in relation to the cursor's movements

I have searched extensively for similar questions but have been unable to resolve my issue. Here, I am sharing just a single list item from my code. The task at hand is to create a span element on the mousemove event over the list item, and dynamically set its left offset relative to its parent as the mouse moves. Since this is new territory for me, I have experimented quite a bit with the following code snippet:

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>

Despite the functionality of the span moving along with the mouse cursor, it leaves behind trailing remnants:

https://i.sstatic.net/kDaCm.png

In addition to the trailing remnants, there are occasions when the span fails to display altogether. This problem is exacerbated in the snippets provided for this question.

What could be causing these issues and how can they be rectified?

javascript html jquery css cursor-position

Answer 1

Answer №1

Upon reviewing your inquiry, it appears that the issue arises from adding a new span each time the mouse moves. It seems like you only intend to add the span when the mouse enters and remove it upon mouse exit.

I have attempted to retain most of your original code while addressing the specific issue causing the problem.

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>

Answer 2

Upon reviewing your inquiry, it appears that the issue arises from adding a new span each time the mouse moves. It seems like you only intend to add the span when the mouse enters and remove it upon mouse exit.

I have attempted to retain most of your original code while addressing the specific issue causing the problem.

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>

Answer 3

Answer №2

I'm a bit uncertain about the exact placement you're looking for with your span element, but there are a few issues in your code that need addressing first. Once those are fixed, adjusting the positioning of the element should be relatively straightforward.

Firstly, you currently append the span element within a mousemove function and then check on every event trigger if the span is already present. I suggest modifying this to utilize the mouseenter event for creating the span. Additionally, consider establishing a separate mouseleave handler for your link outside of the mousemove event.

In terms of where you'd like the element to appear or follow your mouse, you can customize the offsetX and offsetY variables within the moveSpan() function to suit your requirements.

Keep in mind that when positioning the element, the calculation is based on the position of your a element.

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 4

I'm a bit uncertain about the exact placement you're looking for with your span element, but there are a few issues in your code that need addressing first. Once those are fixed, adjusting the positioning of the element should be relatively straightforward.

Firstly, you currently append the span element within a mousemove function and then check on every event trigger if the span is already present. I suggest modifying this to utilize the mouseenter event for creating the span. Additionally, consider establishing a separate mouseleave handler for your link outside of the mousemove event.

In terms of where you'd like the element to appear or follow your mouse, you can customize the offsetX and offsetY variables within the moveSpan() function to suit your requirements.

Keep in mind that when positioning the element, the calculation is based on the position of your a element.

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>

Adjusting position in relation to the cursor's movements

Answer №1

Answer №2

Similar questions

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

Retrieve data from MongoDB using the unique identifier (_id) and additional conditions with Express

Vuejs failing to update data

Changing the Button Background in Richfaces

Having trouble retrieving response content in Mithril

sole active component present

Combining HTML with multiple .ts files in Angular

Connecting promises to build upon past outcomes

Use an if statement in Angular to conditionally add a title attribute with an empty value to HTML

Retrieving information from a database with AJAX in CodeIgniter

The AJAX response is not functioning as expected

Delivering a JSON response containing an item within an array

Dynamic value for href in div using Angular

floating downward inside the container

"Exploring the world of WordPress: Developing plugins with Ajax for database integration and admin email

Updating the status of a 2D array with N elements in React: A step-by-step guide

Exploring nested arrays with recursive looping

The Stripe payment form effortlessly updates in real-time thanks to the powerful @stripe/react-stripejs module

What could be the reason for the variable not resetting in my event handler?

Using jQuery to show array elements with unique formatting or separator