html - 悬停时如何更改 'a' 标签内的 img？

Question

我在 a 标签内有一个 img。当悬停在 a 上时，我想更改图片 url。 CSS 是否可行？

<a  href="#"><img  src="img/takipet.png" alt=""></a>

Answer 1

要直接回答您的问题，这里有一种仅使用 CSS 的方法:

HTML:

<div id="the-image-wrapper">
  <img id="image-main" src="some/src">
  <img id="image-alternate" src="some/other/src">
</div>

CSS:

#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}

不过，您最好尝试另一种方法，例如改用背景图片。当然，这实际上取决于应用程序。

如果你要走背景图片路线，你应该take a look at using sprites .