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

你只需要给图片套上一个链接标签（<a>）就能实现点击跳转，原有的悬停变色效果完全不受影响，具体修改如下：

修改后的完整代码 #

<div class="primary">
  <!-- 新增链接标签，把目标页面地址填在href属性里 -->
  <a href="你要跳转的页面地址" target="_blank">
    <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" />
  </a>
</div>

<style type="text/css">
  .primary {
    cursor: pointer;
  }

  .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");
    /* Firefox 10+, Firefox on Android */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    /* IE 6-9 */
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }

  .primary:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: none;
    filter: none;
  }
</style>

关键改动说明 #

• 在<img>标签外层添加<a>标签，href属性中填写你需要跳转的页面地址（比如你的Google Sites内页链接）
• target="_blank"是让链接在新浏览器标签页打开，若希望在当前页面跳转，可直接删除这个属性
• 原有的CSS样式无需任何修改，悬停时黑白转彩色的效果会正常触发

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