如何将具有悬停效果的图像转换为可点击的链接

Question

所以我不知道如何编码，但我正在使用谷歌网站创建一个网站，并希望当你将鼠标悬停在图像上时图像从黑白变为彩色。我找到了执行此操作的 HTML 代码，但现在我想知道是否也可以做到这一点，以便当您单击图像时，它会将您带到另一个页面。

这是我的 HTML 代码，只有悬停效果：

<div 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" />
</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>

Answer 1

添加此：

<script>
    const myTrigger = document.querySelector('div > img');
    myTrigger.addEventListener('click', () => {
        window.open('https://www.zerohedge.com/', '_blank').focus();
    });
</script>

通过

document.querySelector()

，您可以选择要观看的 HTML 元素。

addEventListener('click', function)

允许您指定当有人单击该元素时，您希望它执行某些操作。

最后，匿名箭头函数告诉浏览器当有人点击触发元素时要做什么。