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>

Answer 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>