CSS: How to animate background color to highlight on hover, with only the area of cursor changing color?

Question

I am trying to make the background color of a row change on hover with only the area of the cursor changing color/being highlighted.

I have a white background color set, and would like to have the area of the cursor highlighted with a yellow feathered circle when hovering over the background.

I can't seem to find the proper code for it, but only finding codes to change the complete background on hover.

Is this something that's possible to do in CSS?

.vc_row {
   -webkit-transition:all 1s;
   transition:all 1s;   
  }

  .vc_row:hover {
        background: -webkit-gradient(
  radial, 500 25%, 20, 500 25%, 40, from(#faf9f4), to(#cef230)
);  
} 

Answer 1

Even through my predisposition to using JavaScript (it is where my skills lie), I believe you can't just do this in CSS, but also need JavaScript to do this. There might be a way, but I don't know it, and I am curious for someone else to answer with a magical full CSS solution and blow our minds. :D

For one approach of doing this, you need to use ::after to create the hover-element inside the row. You can then use CSS variables to pass your mouse position (gathered through JavaScript) into the hover-element, making it track the mouse position. Here is an example:

<!-- HTML -->
<div class="row">

</div>

/* CSS */
.row {
    width: 300px;
    height: 300px;
    margin: 30px 30px;
    position: relative;
    overflow: hidden;
    background: white;
}

.row::after {
    content: "";
    position: absolute;
    top: calc(var(--y, 0) * 1px - 50px);
    left: calc(var(--x, 0) * 1px - 50px);
    width: 100px;
    height: 100px;
    opacity: 0;
    background: radial-gradient(#cef230, #ffffff00 80%);
    transition: opacity 1s;
}
.row:hover::after {
    opacity: 1;
}

// JavaScript
const element = document.querySelector(".row");

element.addEventListener("mousemove", (e) => {
    const { x, y } = element.getBoundingClientRect();
    element.style.setProperty("--x", e.clientX - x);
    element.style.setProperty("--y", e.clientY - y);

});

Key elements are the ::after to create the hover-element, the use of position: absolute; to allow for "top" and "left" attributes to position the hover-element, and applying overflow: hidden; to the row: in my testing the hover-element kept the mouse-move event firing even outside the row, unless overflow was hidden.