如何单独实现链接的悬停缩放效果并避免集体悬停

嗨，我来帮你搞定这个问题！你现在遇到的情况，主要是两个小问题导致的：一是HTML里的style属性写法不符合规范，二是还没给单个链接配置独立的缩放悬停逻辑，同时确保每个链接的hover状态只作用于自身。下面我一步步给你修正：

第一步：修复HTML的style属性错误 #

你的<div>标签写了两个style属性，浏览器只会识别第一个，所以得把它们合并成一个，这样居中样式才能正常生效：

<div class='link' style="text-align:center; text-decoration:none">
  <a id='left' href="how.html">How to Avoid Fighting</a>                 
  <a id='center' href="why.html">Why You Should Not Fight</a>                 
  <a id='right' href="Ways.html">Ways to Fight</a>
</div>

第二步：修改CSS实现独立悬停缩放 #

你需要让每个链接成为独立的可交互单元，同时添加缩放动画和过渡效果。核心是给<a>标签加上display: inline-block，让每个链接拥有自己的盒子模型，这样hover状态就只会作用于当前鼠标指向的链接：

body{
  background: gray;
}

.link a {
  font-size: 25px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.41);
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  border-radius: 10px;
  text-decoration: none;
  /* 让每个链接成为独立的内联块元素，确保hover只作用于自身 */
  display: inline-block;
  /* 添加左右间距，避免链接挤在一起 */
  margin: 0 10px;
  /* 过渡动画，让缩放和颜色变化更平滑自然 */
  transition: all 0.3s ease;
}

.link a:hover {
  color: #000000;
  /* 实现缩放缩小效果，0.9是缩放到原大小的90%，可根据需求调整数值 */
  transform: scale(0.9);
}

为什么这样修改有效？ #

• display: inline-block：让每个链接变成独立的盒子，鼠标悬停时只会触发当前链接的hover状态，不会影响其他链接；
• margin: 0 10px：给链接之间加上间距，避免鼠标移动时误触相邻链接；
• transition: all 0.3s ease：让颜色变化和缩放效果有平滑的过渡动画，提升交互体验；
• transform: scale(0.9)：实现你想要的“hover时稍微缩小”的效果，数值可以按需调整（比如0.85更小，0.95稍小）。

这样修改后，你就能实现每个链接单独的悬停缩放效果，再也不会出现集体悬停的问题啦！

备注：内容来源于stack exchange，提问作者Hannah Ly