类似Windows的瓷砖边框效果

Question

因此，当您将鼠标放在“瓷砖”附近时，Windows 会产生这种令人难以置信的效果，如下所示：

1. 当您将鼠标放在图块外，但在图块容器内时（这里是 4 个图块的交叉点）：

2. 当您将鼠标放在磁贴内时（此处靠近移动热点磁贴的右上角）：

3. 当您将鼠标放在磁贴外但位于磁贴某段长度的中点时（注意磁贴的相对两侧如何点亮）：

只是为了好奇/乐趣，使用 css 和/或 JS 模拟这种效果的最佳方法是什么？我正在使用网格布局来创建图块，但由于我宁愿解决问题而不是进入细节，让我们用这些假设来简化事情：

a) tile 的位置是固定的，在用户在页面上时不会改变
b) 可以使用 JS 获取任何 tile 的行和列号
c) 所有 tile 具有相同的尺寸
d)瓷砖容器完全填满，没有空瓷砖插槽

我的尝试：

因此，首先我mousemove在 tile 容器上放置了一个事件侦听器，对于鼠标所做的每一次移动，我都会遍历所有的 tile，找到所有边缘位于鼠标附近的地方，并适当地对它们应用点亮效果。但是随着瓷砖数量的增加，这开始花费太多时间。

然后我尝试使用相对于瓷砖容器的鼠标坐标应用一些计算，并根据坐标提取“附近”瓷砖，但这对我来说造成了太多问题，可能是由于一些不正确的数学。

特尔；博士：

试图找出一种快速的方法来模拟 Window 的瓷砖点亮效果，即使是粗糙的副本也可以，只要它看起来足够酷。任何帮助将不胜感激:)

Answer 1

这是一个公认的hacky解决方案。但是，如果您的菜单具有静态尺寸，它应该可以解决问题：

const container = document.getElementById('container');
const glow = document.getElementById('glow');

container.addEventListener('mousemove', e => {
  glow.style.left = e.pageX + 'px';
  glow.style.top = e.pageY + 'px';
});

container.addEventListener('mouseenter', () => {
  glow.style.display = 'block';
})

container.addEventListener('mouseleave', () => {
  glow.style.display = 'none';
})

body {
  margin: 0;
  background-color: #111111;
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  position: relative;
  width: fit-content;
  overflow: hidden;
}

#container>* {
  background: rgb(77, 77, 77);
}

#glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(#fff, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

#container .vertical {
  position: absolute;
  height: 100%;
  width: 8px;
  top: 0;
  background: #111111;
}

.vertical-one {
  left: 151px;
}

.vertical-two {
  left: 311px;
}

#container .horizontal {
  position: absolute;
  width: 100%;
  height: 8px;
  left: 0;
  background: #111111;
}

.horizontal-one {
  top: 101px;
}

.horizontal-two {
  top: 211px;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="glow"></div>
  <div class="vertical vertical-one"></div>
  <div class="vertical vertical-two"></div>
  <div class="horizontal horizontal-one"></div>
  <div class="horizontal horizontal-two"></div>
</div>

它本质上是一个带有白色径向渐变的 div，它在光标移动时跟随光标位置。hacky 部分是使用与每个项目之间的背景颜色相同的条。不是我所说的可扩展解决方案，但是，它有效。