Search code examples
javascriptmousehover

how do i style some part of the shape in hover?

the bigger circle is the mouse cursor and the small one is a fixed circle in the center of the page, how can style this circle like the image when the cursor touches some area of the center circle? enter image description here

Solution

  • Here is a simple example of a large circle being used like the cursor and using mix-blend-mode difference.

    The background of the container is blue (#0000ff) and the circles are yellow (#ffff00) so that the difference is white (#ffffff).

    When the circles overlap the difference is #000000 and that differenced with blue is blue.

    <!doctype html>
<html>

<head>
  <title>Circles</title>
  <style>
    .bg {
      width: 100vw;
      height: 100vh;
      background: blue;
      mix-blend-mode: difference;
      cursor: none;
      position: fixed;
      top: 0;
      left: 0;
    }
    
    .fixedcircle {
      width: 100px;
      height: 100px;
      background: yellow;
      border-radius: 50%;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
      position: relative;
      position: fixed;
      mix-blend-mode: difference;
    }
    
    .cursor {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: yellow;
      position: absolute;
      mix-blend-mode: difference;
    }
  </style>
</head>

<body>
  <div class="bg"></div>
  <div class="fixedcircle"></div>
  <script>
    const cursor = document.createElement('div');
    cursor.classList.add('cursor');
    document.body.append(cursor);
    document.body.addEventListener('mousemove', function() {
      cursor.style.top = (event.clientY - 100) + 'px';
      cursor.style.left = (event.clientX - 100) + 'px';
    });
  </script>
</body>

</html>