实现鼠标悬停链接时为6个图标之一添加外发光效果

问题说明 #

我尝试了多种方法均未成功。我有6个图标，以及20-30个链接，希望在鼠标悬停不同链接时，为对应图标添加外发光效果。本示例使用Bootstrap5，当前尝试实现悬停链接5.html时为第二个图标添加该效果，但现有代码无效。

原代码问题分析 #

原CSS选择器a[href="5.html"]:hover+div .division-icon:nth-child(2) img无法生效，原因是：

• 链接元素和图标所在的<div class="row">并非相邻兄弟关系，CSS的相邻选择器+只能选中紧接在当前元素后的兄弟元素
• 跨结构的元素无法通过纯CSS选择器定位，必须借助JavaScript实现关联

解决方案 #

通过数据属性关联链接与图标，配合JavaScript监听悬停事件来添加/移除外发光样式：

1. 修改HTML结构 #

给链接添加data-target-icon属性，值对应目标图标的索引（从0开始计数）；给每个图标容器添加统一标识类：

<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 icon-container">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="environmental-health.html" title=""><img src="images/restaurant.svg" /></a>
    </div>
  </div>
  <div class="col-1 icon-container">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="wellness-health-promotion.html" title=""><img src="images/wellness.svg" /></a>
    </div>
  </div>
  <div class="col-1 icon-container">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="maternal-child-health.html" title=""><img src="images/mch.svg" /></a>
    </div>
  </div>
  <div class="col-1 icon-container">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="adult-services.html" title=""><img src="images/tas.svg" /></a>
    </div>
  </div>
  <div class="col-1 icon-container">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="dental-health.html" title=""><img src="images/dental.svg" /></a>
    </div>
  </div>
  <div class="col-1 icon-container">
    <div class="division-icon d-flex align-items-center justify-content-center">
      <a href="administration.html" title=""><img src="images/admin.svg" /></a>
    </div>
  </div>
  <div class="col-3"></div>
</div>

<a href="1.html" data-target-icon="0">1</a>
<a href="2.html" data-target-icon="1">2</a>
<a href="3.html" data-target-icon="2">3</a>
<a href="4.html" data-target-icon="3">4</a>
<a href="5.html" data-target-icon="1">5</a> <!-- 对应第二个图标，索引为1 -->
<a href="this-is-the-url.html" data-target-icon="4">this is the url</a>
<a href="test-url.html" data-target-icon="5">test url</a>

2. 定义CSS外发光样式 #

新增一个glow类，用于添加外发光效果：

.division-icon {
  background-color: #ff8066;
  border: solid 4px #c34a36;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: auto;
  overflow: hidden;
  transition: 0.1s linear;
  position: relative;
}

.division-icon img {
  width: 50px;
  transition: 0.1s linear;
}

/* 外发光样式 */
.division-icon.glow img {
  box-shadow: 0px 0px 10px 3px #d06e5e;
}

3. 添加JavaScript逻辑 #

监听链接的悬停事件，找到对应图标并切换glow类：

// 获取所有带data-target-icon属性的链接
const links = document.querySelectorAll('a[data-target-icon]');
// 获取所有图标容器
const iconContainers = document.querySelectorAll('.icon-container');

links.forEach(link => {
  // 鼠标悬停时添加发光效果
  link.addEventListener('mouseover', () => {
    const targetIndex = link.getAttribute('data-target-icon');
    const targetIcon = iconContainers[targetIndex].querySelector('.division-icon');
    targetIcon.classList.add('glow');
  });
  
  // 鼠标离开时移除发光效果
  link.addEventListener('mouseout', () => {
    const targetIndex = link.getAttribute('data-target-icon');
    const targetIcon = iconContainers[targetIndex].querySelector('.division-icon');
    targetIcon.classList.remove('glow');
  });
});

优势说明 #

• 可扩展性强：新增链接或图标时，只需添加对应data-target-icon属性即可，无需修改大量CSS
• 逻辑清晰：通过数据属性明确关联关系，便于维护
• 性能友好：事件监听仅绑定在需要的链接上，避免不必要的DOM操作

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