it's possible to change text properties by custom zone on hover?

Question

Here is my expected Result:

Hello everyone, I can not reproduce the result of the image.

I would like to get the result of the image, I have a custom cursor, and when I hover over text with I would like its properties to change, but only inside the cursor.

I would like the black text to become white (I saw that it was possible via CSS mix-blend-mode) but I would also like the red text to become outline yellow only, combining the other property.

Is there a way to create this?

Answer 1

Yes, sure... if your custom cursor can be some shape (in example below it is circle)

I don't style the cursor, but the element "circle" is moving with cursor, so I think that has the same feel. Behind all magic here is css property called clip-path (more about it is here). If you have any questions, ask!

P.S. View code snipper on full page :)

      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>