实现鼠标移动边框高亮效果

1、html部分

 <div class="container">
    <div class="card">
      <div class="inner">1</div>
    </div>
    <div class="card">
      <div class="inner">2</div>
    </div>
    <div class="card">
      <div class="inner">3</div>
    </div>
    <div class="card">
      <div class="inner">4</div>
    </div>
    <div class="card">
      <div class="inner">5</div>
    </div>
    <div class="card">
      <div class="inner">6</div>
    </div>
  </div>

2、css部分

body {
  background-color: black;
}
.container {
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /* align-items: center; */
  padding: 20px;
  background-color: #312f2f;
}

.card {
  margin-bottom: 15px;
  width: 600px;
  aspect-ratio: 4/3;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: #222;
  inset: 2px;
  border-radius: inherit;
  z-index: 3;
}

.card::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  left: var(--x, -1000px);
  top: var(--y, -1000px);
  background: radial-gradient(closest-side circle,rgba(255,255,255,0.6) 0%, transparent);
  border-radius: inherit;
  transform: translate(-50%, -50%);
}

3、js部分

const container = document.querySelector('.container');
const cards = document.querySelectorAll('.card');

container.onmousemove = function (e) {
  for (const card of cards) {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.setProperty('--x', `${x}px`);
    card.style.setProperty('--y', `${y}px`);
  }
}