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.
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');;
});