脚本更新需求：文本链接hover时为图片添加不同颜色CSS发光效果

此前由Adam协助完成的脚本，当前实现的是鼠标悬停文本链接时，对应图片容器会添加统一的蓝色CSS发光效果。现在需要调整为每个图片对应不同颜色的发光效果：

• 悬停指向environmental-health.html的链接时，第一张图片（data-target="image1"）显示绿色发光
• 悬停指向wellness-health-promotion.html的链接时，第二张图片（data-target="image2"）显示紫色发光
• 其他链接可按需配置对应颜色

1. JavaScript 代码 #

window.onload = () => {
  const elements = document.querySelectorAll('[data-hover][data-glow-color]');
  elements.forEach(element => {
    element.addEventListener('mouseenter', event => {
      const targetEl = getTargetElement(event.target);
      const glowColor = event.target.getAttribute('data-glow-color');
      targetEl.style.boxShadow = `0px 0px 10px 5px ${glowColor}`;
    });
    element.addEventListener('mouseleave', event => {
      const targetEl = getTargetElement(event.target);
      targetEl.style.boxShadow = '';
    });
  });
}

function getTargetElement(element) {
  const target = element.getAttribute('data-hover');
  return document.querySelector(`[data-target="${target}"]`);
}

2. CSS 代码 #

.division-icon {
  background-color: #ff8066;
  border: solid 4px #c34a36;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: auto;
  overflow: hidden;
  transition: box-shadow 0.1s linear; /* 明确过渡属性为box-shadow */
  position: relative;
}

.division-icon img {
  width: 50px;
}

3. HTML 代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <div class="col-3">
  </div>
  <div class="col-1">
    <div class="division-icon d-flex align-items-center justify-content-center" data-target="image1">
      <a href="environmental-health.html" title=""></a><img src="https://picsum.photos/id/237/50" />
    </div>
  </div>
  <div class="col-1">
    <div class="division-icon d-flex align-items-center justify-content-center" data-target="image2">
      <a href="wellness-health-promotion.html" title=""></a><img src="https://picsum.photos/id/238/50" />
    </div>
  </div>
  <div class="col-1">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="maternal-child-health.html" title=""></a><img src="https://picsum.photos/id/239/50" />
    </div>
  </div>
  <div class="col-1">
    <div class="division-icon d-flex align-items-center justify-content-center" data-target="image4">
      <a href="adult-services.html" title=""></a><img src="https://picsum.photos/id/231/50" />
    </div>
  </div>
  <div class="col-1">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="dental-health.html" title=""></a><img src="https://picsum.photos/id/232/50" />
    </div>
  </div>
  <div class="col-1">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="administration.html" title=""></a><img src="https://picsum.photos/id/233/50" />
    </div>
  </div>
  <div class="col-3">
  </div>
</div>

<!-- 给需要对应发光的链接添加data-hover和data-glow-color属性 -->
<a href="1.html" data-hover="image1" data-glow-color="#2ecc71">1（对应第一张图绿色发光）</a>
<a href="2.html" data-hover="image2" data-glow-color="#9b59b6">2（对应第二张图紫色发光）</a>
<a href="3.html">3</a>
<a href="4.html" data-hover="image4" data-glow-color="#3498db">4（对应第四张图蓝色发光）</a>
<a href="5.html" data-hover="image2" data-glow-color="#9b59b6">5（对应第二张图紫色发光）</a>

• HTML：给每个需要触发彩色发光的链接新增data-glow-color属性，填入目标发光颜色的十六进制值（或RGB/RGBA格式），同时确保data-hover属性值与对应图片容器的data-target值一致。
• JavaScript：
  • 调整选择器，仅匹配同时带有data-hover和data-glow-color属性的元素
  • 鼠标悬停时，读取链接的data-glow-color值，动态设置目标图片容器的box-shadow样式
  • 鼠标离开时清除box-shadow样式，恢复元素初始状态
• CSS：将过渡属性明确指定为box-shadow，确保发光效果的过渡动画正常生效，移除了原固定蓝色的.data-target-hover类

内容的提问来源于stack exchange，提问作者iBison