如何制作一个根据鼠标位置变化的渐变动态边框

Question

我想知道

background-image

属性是否可以通过 JavaScript 实时编辑，我想做的与以下问题有类似的概念： 如何根据鼠标位置改变背景颜色（特定颜色）

但是我没有编辑背景，而是编辑边框，仅在光标所在的角落赋予其 100% 不透明度。

我尝试获取渐变圆角边框的CSS方法如下： https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

在JavaScript上，我所做的方法如下（使用jQuery 3.7.1来检测元素内的鼠标位置）：

if(x <= middle_x && y <= middle_y)
{
    content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at top left, #8B686B, #00000000, #00000000);";
}
else if(x >= middle_x && y <= middle_y)
{
    content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at top right, #8B686B, #00000000, #00000000);";
}
else if(x <= middle_x && y >= middle_y)
{
    content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at bottom left, #8B686B, #00000000, #00000000);";
}
else if(x >= middle_x && y >= middle_y)
{
    content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at bottom right, #8B686B, #00000000, #00000000);";
}

（内容是包含边框的 div 元素）。

但是，经过测试，该算法似乎没有效果，因为即使算法检测到了光标位置对应的位置和角点，元素的边框仍然保持静态。

所以之后我就觉得

background-image

不能实时编辑了。

我应该尝试另一种 CSS 方法吗？最后这个想法是不是错了？

Answer 1

您不需要 JavaScript。将 div 元素放置在“盒子”内，并在悬停子 div 元素之一时设置盒子的样式。要使子 div 元素填满盒子，您可以使用 CSS flex（如果网格中应该放置更多 div 元素，则可以使用 CSS grid）。

使用 CSS

:has()

，您可以使 CSS 选择器在其子元素之一悬停时将其定位到该框。

div.box {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, red, blue);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  display: flex;
  flex-direction: row;
}

div.box div {
  flex-grow: 1;
}

div.box:has(div:nth-child(1):hover) {
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, orange, red, blue);
}

div.box:has(div:nth-child(2):hover) {
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, green, orange, red, blue);
}

div.box:has(div:nth-child(3):hover) {
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, silver, green, orange, red, blue);
}

div.box:has(div:nth-child(4):hover) {
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, purple, silver, green, orange);
}

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>