悬停的图像？ （鼠标移到）

Question

改为

鼠标悬停时..就像你可以用a：hover一样，我该怎么做？

我试过

addFriend img:hover{
    background: url(images/addFriend_hover.png);
}

Answer 1

抛弃img标记，并在没有javascript的情况下执行此操作

（脱离我的头顶，未经测试）

HTML

<div class="addFriend"><a href="addfriend.html">Add Friend</a></div>

CSS

.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }

Answer 2

你也可以使用jQuery。

$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});

修改 你也可以做非jQuery，我假设你不想要背景图像或href

<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />

Answer 3

要使用最少的代码在所有浏览器中工作，您可以使用CSS。

<a href="#" class="icon">Add A Friend</a>



.icon {
  display: block;
  width: (width of image);
  height: (height of image);
  text-indent: -9999px; /* hides the text 'Add A Friend' */
  background: url(url of image) no-repeat center center;
  padding-right: 55px;
}

.icon:hover {
  background: url(url of new image) no-repeat center center;
}

Answer 4

您必须使用带有背景图片的容器，例如具有指定高度和宽度的div。然后你可以使用背景图像和a：hover-pseudo-class。

Answer 5

本教程可能很有用：http://www.w3schools.com/js/js_animation.asp 要查看它是否符合您的要求，请向下滚动到“整个代码”，然后单击“自己尝试”。