如何创建鼠标悬停时整体切换颜色的双色超链接？

你当前的问题是只有鼠标悬停在单个文字上时才会变色，要实现鼠标悬停整个链接时整体切换颜色，只需要把hover的触发条件从span改为父级的a标签即可，修改后的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 初始状态颜色 */
      .color-switch-link .red_to_blue { color: red; }
      .color-switch-link .blue_to_red { color: blue; }
      
      /* 鼠标悬停整个链接时的颜色切换 */
      .color-switch-link:hover .red_to_blue { color: blue; }
      .color-switch-link:hover .blue_to_red { color: red; }
    </style>
  </head>
  <body>
    <a href="#" class="color-switch-link">
      <span class="red_to_blue">Hello</span>
      <span class="blue_to_red">World</span>
    </a>
  </body>
</html>

原理说明 #

• 给父级<a>标签添加统一类名（比如color-switch-link），精准控制该链接下的所有子元素。
• 将hover事件绑定到<a>标签上，当鼠标悬停在整个链接区域时，会触发内部两个<span>同步切换颜色，而非仅鼠标触碰单个<span>才变化。

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