CSS：图片链接，悬停时更改 [英] CSS: image link, change on hover

问题描述

我有一个图片是链接。我想在用户悬停在链接上时显示不同的图片。

I have an image that is a link. I want to show a different image when the user hovers over the link.

目前我正在使用此代码：

Currently I'm using this code:

<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>

div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

但我有很多问题： CSS规则（当我在Firebug中查看它时，元素不显示相关的CSS规则）。

But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).

也许这是因为（我知道）这是无效的HTML：你不能把< a> 围绕< div> 。但是，如果我切换到< span> ，那么似乎我会遇到更大的问题，因为您不能可靠地在span上设置高度和宽度。

Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.

帮助！

推荐答案

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

使用链接本身的类并忘记div

use a class for the link itself and forget the div

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}

这篇关于CSS：图片链接，悬停时更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！