我如何在悬停中设置形状的某些部分？

Question

大圆圈是鼠标光标，小圆圈是页面中心的固定圆圈，当光标触摸到中心圆的某个区域时，如何像图像一样设置这个圆的样式？

Answer 1

这里是一个简单的例子，大圆圈像光标一样使用，使用mix-blend-mode区别。

容器的背景是蓝色的（#0000ff），圆圈是黄色的（#ffff00）所以区别是白色的（#ffffff）。

当圆圈重叠时，差异为#000000，与蓝色的差异为蓝色。

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

我如何在悬停中设置形状的某些部分？

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

javascript

mousehover