How can I invert the color black to make it visible during mouseover?

Question

I have a circular mouse sprite that will show the inverse of a color during mouseover. I want to be able to use this to find black text (hidden within a black background) and make the black text visible as white if the circular mouse sprite is over the text.

It looks as follows:

Over text:

I want to make it so that when its over the text "FEELING LEFT IN THE DARK?", the text will appear white, but only within the cursor. For example, in the second image above, only the bottom part of "EL" should be visible as WHITE while the circular mouse sprite is over the text.

I wonder if this is even possible? and if so, help is appreciated.

HTML:

Feeling Left 
 in the dark?

CSS:

/*The text "Feeling left in the dark?*/
.contact-intro {
    text-align: left;
    justify-content: center;
    margin: auto;
    margin-left: 28.55%;
    margin-top: 3%;
    display: inline-block;
    text-transform: uppercase;
    color: black;
    font-size: 7em;
    z-index: 500;
}

/*The Cursor*/
@media ( hover: none ) {

    .cursor {
    
      display: none !important;
      
      }
    }
  
  * {
  
    cursor: none;
    
    }
  
  .cursor {
  
    --size: 80px;
    
    height: var( --size );
    width: var( --size );
    
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
    transform: translate( -50%, -50% );
    z-index: 1;
    
    }
  
  .cursor.cursor-dot {
  
    background: orangered; /* This defines the color of the cursor */
    mix-blend-mode: difference;
    transition: width 0.6s, height 0.6s, background-color 0.6s;
    transition-timing-function: ease-out;
    
    }
  
  .cursor-dot.active {
  
    --size: 50px;
    
    background-color: #ffffff;
    
    }

JQUERY:

//text inversion
        $(() => {

            $('body').prepend('');

            $(window).mousemove(function (e) {

                $('.cursor').css({

                    left: e.pageX,
                    top: e.pageY

                });

            });

            $(window).mousemove(function (e) {

                $('a').on('mouseenter', function () {

                    $('.cursor').addClass('active');

                });

            });

            $(window).mousemove(function (e) {

                $('a').on('mouseleave', function () {

                    $('.cursor').removeClass('active');

                });

            });

        });

user_1233305 · Answer

This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.

const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
  cur.style.top = e.y - height / 2 + 'px';
  cur.style.left = e.x - width / 2 + 'px';
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#txt {
  position: relative;
  color: black;
  background-color: transparent;
  z-index: 300;
  font-size: 3rem;
  padding: 1rem;
}

#cur {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background-color: red;
  z-index: 200;
}

FEELING LEFT IN THE DARK?

How can I invert the color black to make it visible during mouseover?

1 Answers