可以通过悬停时的自定义区域更改文本属性吗？

Question

大家好，我无法重现图像的结果。

我想获得图像的结果，我有一个自定义光标，当我将鼠标悬停在文本上时，我希望更改其属性，但仅限于光标内部。我希望黑色文本变成白色（我看到可以通过 css mix-blend-mode 实现），但我也希望红色文本仅变成轮廓黄色，结合其他属性。有办法创建这个吗？

Answer 1

是的，当然...如果您的自定义光标可以是某种形状（在下面的示例中是圆形）

我不设置光标的样式，但元素“圆”随光标移动，所以我认为具有相同的感觉。 这里所有魔法的背后是名为clip-path的CSS属性（更多关于它的信息请参见here）。 如果您有任何疑问，请提问！

附注在整个页面上查看代码片段:)

      const circle = document.getElementById("circle");
      const hoveredTextStyle =
        document.getElementById("hovered-text-style").style;

      document.addEventListener("mousemove", (e) => {
        //circle move
        circle.style.left = e.pageX - 100 + "px";
        circle.style.top = e.pageY - 100 + "px";

        //position and size of text
        const textRect = document.querySelector("span").getBoundingClientRect();

        //circle with our text collision detection
        if (
          e.clientY + 100 > textRect.top &&
          e.clientY - 100 < textRect.bottom
        ) {
          const clipPathX = e.clientX - textRect.left;
          const clipPathY = e.clientY - textRect.top;
          hoveredTextStyle.clipPath = `circle(100px at ${clipPathX}px ${clipPathY}px)`;
        } else {
          hoveredTextStyle.clipPath =
            "circle(0 at 0 0)";
        }
      });

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        cursor: none;
         }
      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 100px;
        position: relative;
      }
      .container {
        position: relative;
        background-color: rgb(13, 215, 60);
      }
      .container span:not(.original-text) {
        position: absolute;
        left: 0;
        top: 0;
      }
      #normal-text-style {
        /* Normal text style */
        position: relative;
        z-index: 1;
      }
      #hovered-text-style {
        /* Text style when its hovered */
        color: white;
        text-decoration: underline;
        z-index: 2;
        clip-path: circle(0 at 0 0 ); 
      }
      #circle {
        top: 0;
        position: absolute;
        width: 200px;
        aspect-ratio: 1/1;
        border: 4px solid red;
        border-radius: 50%;
        z-index: 9999;
      }

    <div id="circle"></div>
    <div class="container">
      <span id="normal-text-style">Some magic text</span>
      <span id="hovered-text-style">Some magic text</span>
    </div>