HTML5/CSS3 : Hover Image Replacement

Question

我已经在 Stack Overflow 上阅读了多个解决方案，但我仍然没有找到我的解决方案。我试过在此处添加图像并使用 CSS 操作#one:hover，但没有任何反应。使用 image goes here 并使用 CSS 操作 #one:hover 我得到的结果有限，但它们都是错误的。原始图像永远不会被替换，替换图像的一条非常细的线出现在我的原始图像下方。这是我的代码:

HTML5:

<nav>
<p/><p/>
<a id="one" href="form.html"><img src="nav.email.gif" alt="E-Mail Form" width="256px" height="100px"/></a>
</nav> 

CSS3:

#one:hover 
{
background-image: url('nav.email.ani.gif'); 
width:256px; 
height:100px;
}

使用“background”而不是“background-image”没有任何意义，使用 div 标签也没有任何意义。我尝试了替换图像的绝对位置，但我得到的只是一条细线而不是全尺寸图像(即使使用宽度和高度)。提前致谢。

Answer 1

建议的一种解决方案是使用 background-image 到 img 元素，例如:

#imgOne:hover {
  background-image: url('http://placehold.it/200x100');
  width: 256px;
  height: 100px;
}
#imgOne {
  background-image: url('http://placehold.it/400x200');
}

<nav>
  <p/>
  <p/>
  <a id="one" href="form.html">
    <img id="imgOne" src="" alt="E-Mail Form" width="256px" height="100px" />
  </a>

</nav>