Question

0

46

Views

jQuery Toggle Class on "a" Link Hover

I have a custom cursor div which changes when hovering over various elements. So far, I have the cursor expanding on hover of .nav-item-wrapper and shrinking on hover of p.

I'm attempting to have the .cursor-div is--link class toggle on hover of all a but running into problems.

The current draft URL

Here is my jQuery inside of the <body>:

<script>

$('.nav-item-wrapper').on('mouseenter mouseleave', function() {
  $(this).toggleClass('is--active');
  $(this).find('.nav-highlight').toggleClass('is--active');
});

/**pointer link hover toggle**/
$('.nav-item-wrapper').not('.w--current').on('mouseenter mouseleave', function() {
  $('.cursor-div').toggleClass('is--link');
});

/** pointer text hover toggle **/
$('p').on('mouseenter mouseleave', function() {
  $('.cursor-div').toggleClass('is--text');
});

</script>

I attempted to add this but it interferes with the .nav-item-wrapper class change.

$('a').on('mouseenter mouseleave', function() {
  $(cursor-div).toggleClass('is--link');;
});

3 months ago ·

Juan Pablo Isaza

Answer question

Find remote jobs

Loading