本文教你将带有黑白转彩色悬停效果的图片，无缝升级为可点击跳转的超链接，无需额外插件，兼容 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" 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'/></filter></svg>#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：减少依赖，加载更快，适合低代码平台。
⚠️ 若坚持使用 JS 方案（如需动态 URL 或复杂逻辑）
请务必修正原答案中的潜在问题：
- 原
document.querySelector('div > img')过于脆弱（易匹配错元素）； - 缺少 DOM 加载保护，可能导致脚本执行时元素未就绪；
-
window.open(...).focus()在部分浏览器中被拦截。
✅ 安全写法如下（建议放在
