CSS и чистый JS пользовательский курсор расширяется при наведении

Question

У меня есть пользовательский курсор на основе CSS и JS, который я хочу раскрыть при наведении на определенные элементы. Я понимаю, что специфика, кажется, моя проблема, но я не уверен, что именно я делаю неправильно. Из того, что я понимаю, + должен выбрать что-то, что не разделяет тот же родительский объект, что и :hover object

/*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;")
})

.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: ;
}

.inner {
  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 class="inner">
  <span class="switcher about use"><a href="html/about/about.html">about</a></span><br>
</div>



<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

Вопрос в том, почему a:hover+.cursor{} вообще не влияет на курсор. Любая помощь будет оценена.

Answer 1

Вы можете работать с +, если они прямые братья и сестры. Поэтому поместите курсор в промежуток, и он заработает:)

<div class="inner">
  <span class="switcher about use"><a href="html/about/about.html">about</a>
     <div class="cursor"></div>
  </span><br>
</div>