Enlarge custom cursor pointer on hovering links using JS

Question

I've been working on a custom cursor that I want to grow when it hovers over objects with a certain property. I started with css, found that unreliable, and now am trying to use js- pure js that is, not jquery.

The cursor movement seems to work well enough, and the bit for transforming the outer circle also seems to throw up no errors at all, which leaves me confused as to whats going on here. Any help would be appreciated.

/*kinda laggy cursor control js */
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove', e => {
  cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

const all = document.querySelectorAll(".use");
document.addEventListener('mouseOver', function() {
  cursor.style.transform = scale(2)
})

.cursor {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 2px solid rgb(41, 41, 41);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 50ms;
  transition-timing-function: ;
  mix-blend-mode: difference;
  z-index: 200;
  pointer-events: none;
}

.cursor2 {
  z-index: 200;
  transition: 10ms;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;
  pointer-events: none;
  mix-blend-mode: difference;
  position: absolute;
  transition-timing-function: ;
}

.style {
  font-family: 'Helvetica';
  font-size: calc(2em + 8vw);
  font-weight: 700;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(0, 0, 0);
  letter-spacing: -.6vw;
  line-height: calc(.7em + 1vw);
  animation: marquee 30s linear infinite;
  display: inline-block;
  user-select: none;
}

a {
  text-decoration: none;
  cursor: none;
}

a:hover+.cursor {
  transform: scale(1.5);
  !important transition-duration: 500ms;
}

<div id="style use"><a href="somwhere.png">hello</a></div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

How was the CSS one unreliable? I've done this before and it worked nicely using CSS. Could you show us the problem using the CSS one? — Richard
– Richard, Commented Apr 22, 2020 at 6:05
@Richard The problem is my cursor needs to be out of the div containing the links. Theres a set of links on my website, which are animated with css. Since they have multiple transforms on them, I've had to encase them in two container divs, each with one transform. The CSS cursor cannot be inside any of these divs, and because the links and the CSS aren't sibling elements, I can't use the :hover + pseudoselector. — Pranav Nair
– Pranav Nair, Commented Apr 22, 2020 at 6:19

Richard · Accepted Answer · 2020-04-22 07:11:41Z

1

element.style.transform needs to have a string value (in your case, it should have been 'scale(2)' [a string]). I have added a class enlarged to add the increased width and height styles to your cursor upon mouseenter and mouseout of every link in your document.

Here's a working example.

const cursor = document.querySelector('.cursor');
const cursor2 = document.querySelector('.cursor2');
const links = document.querySelectorAll('a')

links.forEach(link => {
  link.addEventListener('mouseenter', e => {
    cursor.classList.add('enlarged')
  })
  link.addEventListener('mouseout', e => {
    cursor.classList.remove('enlarged')
  })
})

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
  cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: none;
}

.cursor {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 2px solid rgb(41, 41, 41);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 
    top 50ms linear,
    left 50ms linear,
    width 500ms ease,
    height 500ms ease;
  z-index: 1;
  pointer-events: none;
}

.cursor.enlarged {
  width: 50px;
  height: 50px;
}

.cursor2 {
  transition: 10ms;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
}

a {
  text-decoration: none;
  cursor: none;
  font-family: Helvetica;
  font-size: 4em;
  padding: 15px;
}

<div id="style use"><a href="somwhere.png">Hello</a></div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

answered Apr 22, 2020 at 7:11

Richard

7,4932 gold badges32 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Over a year ago

@PranavNair If it helped you, don't forget to consider accepting the answer ;-)

Pranav Nair Over a year ago

I'm a little new to stackoverflow, I didn't know that was a thing xd

Collectives™ on Stack Overflow

Enlarge custom cursor pointer on hovering links using JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related