title: How to add a class to change custom pointer/cursor size on mouseover
body: <p>does anybody know how to add a class which triggers the scale of the custom cursor when the class .clickable is detected on mouseover. I added my approach to this project down below. Thanks for your suggestions.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $cursor = $('.cursor');
  
  function moveCursor(e) {
    $cursor.css({
      "top": e.pageY,
      "left": e.pageX
    });
  }
  
  $(window).on('mousemove', moveCursor);
  
  $(".clickable").mouseover(function() {
    $("cursor").addClass(".is-clickable");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    cursor: none;
  }
  
  .cursor {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -50%;
    left: -50%;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background-color: white;
    backface-visibility: hidden;
    transition: transform 0.2s ease-out;
    mix-blend-mode: difference;
    z-index: 1000;
    pointer-events: none;
  }
  
  .clickable {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-color: white;
  }
  
  .cursor.is-clickable {
    transform: scale(0.25);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body style="background-color:black;"&gt;
    &lt;div class="cursor"&gt;&lt;/div&gt;
    &lt;div class="clickable"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>