在悬停

Question

我的锚标记中有一个图像标记

<a href="#"><img src="a.png">My Link</img></a>

当悬停我的锚标签时，是否有可能将图像切换为b.png，然后在取消悬停后返回a.png？

截至目前我正在尝试的是

<img onMouseOver="b.png">

但问题是，在悬停锚标签后，它不会改变回来。

Answer 1

试试这个方法：

• 使用display: none隐藏第二张图片。
• 悬停时，显示第二张图片并使用display: none隐藏第一张图片。

img:last-child          { display: none;  }
a:hover img:last-child  { display: block; }
a:hover img:first-child { display: none;  }

<a href="#">
  <img src="http://dummyimage.com/200x200/000/fff">
  <img src="http://dummyimage.com/200x200/f00/fff">
</a>