CSS: 如何设置动画背景颜色以在悬停时突出显示，只有光标区域改变颜色？

Question

我正在尝试使行的背景颜色在悬停时发生变化，只有光标区域发生变化 color/being 突出显示。

我设置了白色背景颜色，并且希望在鼠标悬停在背景上时用黄色羽毛圆圈突出显示光标区域。

我似乎找不到合适的代码，但只能找到代码来更改悬停时的完整背景。

这在 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

即使我倾向于使用 JavaScript（这是我的技能所在），我相信你不能只是在 CSS 中做到这一点, 但也需要 JavaScript 才能做到这一点。可能有办法，但我不知道，我很好奇其他人会用神奇的完整 CSS 解决方案来回答并让我们大吃一惊。 :D

对于执行此操作的一种方法，您需要使用 ::after 在行内创建 hover-element。然后，您可以使用 CSS 变量将您的鼠标位置（通过 JavaScript 收集）传递到 hover-element，使其跟踪鼠标位置。这是一个例子：

<!-- 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);

});

关键元素是 ::after 创建 hover-element，使用 position: absolute; 允许“顶部”和“左侧”属性定位 hover-element ，并将 overflow: hidden; 应用到行：在我的测试中，hover-element 甚至在行外保持 mouse-move 事件触发，除非溢出被隐藏。

CSS: 如何设置动画背景颜色以在悬停时突出显示，只有光标区域改变颜色？

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

css

background-color

mousehover

animate.css