I want to hover on a button and change another class but it doesnt work

February 2, 2022

I want to hover on a button and change another class but it doesn’t work, I tried multiple ways and I just cant seem to figure it out. Below is the HTML and CSS for the code.

Essentially, I’m trying to make it so when I hover over a button the circle will slowly go up to a specific amount of pixels so I decided to do a background-color test but it doesn’t work.

$(document).ready(
  () => {

    var mouseX = 0;
    var mouseY = 0;
    var xp = 0;
    var yp = 0;
    $(document).on("mousemove", function(event) {
      $(".cursor").css("left", event.pageX - 25);
      $(".cursor").css("top", event.pageY - 25);
      $(".cursor").css("display", "block");
    });
  });

* {
  margin: 0;
}

.cursor {
  height: 50px;
  width: 50px;
  background-color: lightsalmon;
  border-radius: 50%;
  position: absolute;
  display: none;
  z-index: 1;
  pointer-events: none
}

.buttonTest:hover~.cursor {
  background-color: blue;
}

<div style="padding: 1em;">
  <button class="buttonTest">Test Button</button>
</div>
<div class="cursor"></div>

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

>Solution :

I wee bit of javascript can facilitate this. Using JQ’s hover(), you can specify both hoverOn and hoverOff fns.

$(document).ready(
  () => {
    var mouseX = 0;
    var mouseY = 0;
    var xp = 0;
    var yp = 0;
    $('.buttonTest').hover(
      () => $('.cursor').addClass('changeColor'),
      () => $('.cursor').removeClass('changeColor'))
    $(document).on("mousemove", function(event) {
      $(".cursor").css("left", event.pageX - 25);
      $(".cursor").css("top", event.pageY - 25);
      $(".cursor").css("display", "block");
    });
  });

* {
  margin: 0;
}

.cursor {
  height: 50px;
  width: 50px;
  background-color: lightsalmon;
  border-radius: 50%;
  position: absolute;
  display: none;
  z-index: 1;
  pointer-events: none;
  transition: background-color 2s;
}

.changeColor {
  background-color: blue;
}

<div style="padding: 1em;">
  <button class="buttonTest">Test Button</button>
</div>
<div class="cursor"></div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>