如何为带悬停效果的图片添加可点击跳转链接-html教程-PHP中文网

如何为带悬停效果的图片添加可点击跳转链接

本文教你将带有黑白转彩色悬停效果的图片，无缝升级为可点击跳转的超链接，无需额外插件，兼容 google sites 等低代码平台，仅需补充少量现代 html/css/js 即可实现。

本文教你将带有黑白转彩色悬停效果的图片，无缝升级为可点击跳转的超链接，无需额外插件，兼容 google sites 等低代码平台，仅需补充少量现代 html/css/js 即可实现。

要让一张具备“鼠标悬停时从灰度恢复为彩色”效果的图片同时支持点击跳转，核心思路是：保持原有 CSS 悬停逻辑不变，通过 JavaScript 为图片绑定点击事件，触发页面跳转。以下是完整、安全、可直接用于 Google Sites 的整合方案：

✅ 推荐写法（语义清晰、兼容性强）

将原始代码中的 <div class="primary"> 包裹结构升级为 <code><a></a> 标签，既符合 HTML 语义（图片作为链接载体），又避免 JS 事件监听的复杂性，且天然支持 :hover 和 :active 状态：

<a href="https://www.zerohedge.com/" target="_blank" rel="noopener" class="primary">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Across_the_lake_to_Vanbrugh_-_geograph.org.uk_-_4795570.jpg/640px-Across_the_lake_to_Vanbrugh_-_geograph.org.uk_-_4795570.jpg?x-oss-process=image/resize,p_40" alt="风景图"></a>

<style type="text/css">
  .primary {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
  }

  .primary img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: filter 0.2s ease-in;
    /* 移除冗余的 -moz/-o 前缀（现代浏览器已原生支持） */
  }

  .primary:hover img {
    filter: none;
    -webkit-filter: none;
  }

  /* 可选：添加轻微缩放增强交互感 */
  .primary:hover img {
    transform: scale(1.02);
  }
</style>

? 为什么推荐用 <a></a> 包裹而非 JS 监听？

更语义化：图片本质是导航入口，<a></a> 是标准语义标签；

无障碍友好：屏幕阅读器能正确识别链接；

兼容性更稳：Google Sites 对内联 <a></a> 支持良好，而 document.querySelector() 在某些嵌入场景下可能因 DOM 加载时机问题失效；

无需 JS：减少依赖，加载更快，适合低代码平台。