CSS：图像链接，悬停时更改

小编典典

CSS：图像链接，悬停时更改

css

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

目前，我正在使用以下代码：

<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>该位置，似乎会遇到更大的问题，因为您不能可靠地在span上设置高度和宽度。

帮帮我！我该如何做得更好？

阅读 244

2020-05-16

共1个答案

小编典典

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

对链接本身使用类，而忘记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');
}

2020-05-16