鼠标悬停在智能设备上

Question

我想让一个图像在悬停时“变成”另一个图像。因此，基本上页面上有一个图像(image1.png)，当悬停它时，它应该只显示另一个图像(image2.png)，而不是第一个图像。我试着使用这个，它工作得很好：

<img src='Image1.png' width='100' height='100'
 onmouseover="this.src='Image2.png';" 
onmouseout="this.src='Image1.png';" />

这些图片都没有链接，这就是为什么我没有使用任何“悬停”解决方案的原因。

然而，现在我才意识到它只能在电脑上工作，而不能在智能设备上使用，因为它们并没有真正的悬停功能。但由于该网站有相当多的智能设备用户，因此它也适用于他们真的很重要。

有什么解决方案吗？

我的JS技能非常有限，所以我还不能弄清楚。

提前感谢您的帮助！

Answer 1

我个人的经验是，对于这些类型的东西，最好使用CSS，你可以在CSS中指定绝对路径，而不需要图像的链接(../../..)

同样，您不能在移动设备上使用悬停，但您可以将悬停更改为触摸单击。目前这里正在讨论这个问题：Changing :hover to touch/click for mobile devices