我在悬停效果方面遇到问题

Question

我在我的Squarespace网站上实现了悬停效果问题。该效果在桌面上效果很好。在移动设备上，所有图像均正常显示，当我单击它们时，它们会将我带到正确的链接。但是当我在浏览器上按回时，图像消失了。有人可以建议吗？

<a href="https://workitoutgym.com/womeninfo">
<img src="https://static1.squarespace.com/static/5547fb28e4b035cc76d1df27/t/5e24c3a05c97ae22c794c67a/1579467680832/women.jpg"
onmouseover="this.src='https://static1.squarespace.com/static/5547fb28e4b035cc76d1df27/t/5e24c3da6764070705e3c1c9/1579467738774/women+hover.jpg'"
onmouseout="this.src='https://static1.squarespace.com/static/5547fb28e4b035cc76d1df27/t/5e24c3a05c97ae22c794c67a/1579467680832/women.jpg'"></a> 

Answer 1

由于您的悬停图像实际上只是原始图像的70％着色版本，因此只需在悬停时调整不透明度会更容易。这也应该解决您的错误：

.example-link img {
  display: block;
  width: 200px;
  max-width: 100%;
  transition: opacity 250ms;
}

.example-link:hover img {
  opacity: 0.7;
}

<a class="example-link" href="https://workitoutgym.com/womeninfo">
  <img src="https://static1.squarespace.com/static/5547fb28e4b035cc76d1df27/t/5e24c3a05c97ae22c794c67a/1579467680832/women.jpg">
</a>