CSS:图片链接,悬停时更改

Question

我有一个链接的图像.当用户将鼠标悬停在链接上时,我想显示不同的图像.

目前我正在使用此代码:

<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');
}

但是我遇到了很多问题:div没有采用CSS规则(当我在Firebug中查看时,该元素并没有显示相关的CSS规则).

也许这是因为(据我所知)这是无效的HTML:你不能放<a>一个<div>.但是,如果我切换到<span>那时似乎我遇到了更大的问题,因为你无法可靠地设置跨度的高度和宽度.

救命!我怎么能做得更好？

Answer 1

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

使用一个类作为链接本身,忘记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');
}

Answer 2

如果您只想在几个地方创建此效果,则可以使用以下不需要css的html代码.只需插入它.

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" 
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>

请务必完全按原样编写引号,否则它将无效.

Answer 3

<a>这只能用以下方式完成:

#twitterbird {
 display: block; /* 'convert' <a> to <div> */
 margin-bottom: 10px;
 background-position: center top;
 background-repeat: no-repeat;
 width: 160px;
 height: 160px;
 background-image: url('twitterbird.png');
}
#twitterbird:hover {
 background-image: url('twitterbird_hover.png');
}

Answer 4

通过JavaScript或CSS更改它的问题在于，如果连接速度较慢，则图像将需要一秒钟的时间才能更改为悬停的版本。当一个消失而另一个下载时，这将导致不希望的闪烁。

我之前所做的是有两个图像。然后根据悬停状态隐藏并显示它们。这样可以在两个图像之间进行清晰的切换。

<a href="/settings">
    <img class="default" src="settings-default.svg"/>
    <img class="hover" src="settings-hover.svg"/>
    <span>Settings</span>
</a>

a img.hover {
    display: none;
}
a img.default {
    display: inherit;
}
a:hover img.hover {
    display: inherit;
}
a:hover img.default {
    display: none;
}