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

发布于08月13日

Here is my expected Result:个

大家好，我不能再现这个图像的结果.

我想要得到图像的结果，我有一个定制的光标，当我将鼠标悬停在文本上时，我希望它的属性发生变化，但只在光标内部.

我希望黑色的文本变成白色(我看到这是可以通过css的混合-混合模式)，但我也希望红色的文本变成只轮廓黄色，结合其他属性.

有没有办法创造出这样的东西？

推荐答案

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

我没有设计光标的样式，但元素"Circle"是随着光标移动的，所以我认为这有同样的感觉. 在这里所有魔力的背后是名为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>