我有一个图像,它是一个链接。我想当用户将鼠标悬停在链接上时显示不同的图像。
目前我正在使用这段代码:
<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>
那么看来我遇到了更大的问题,因为您无法可靠地设置跨度的高度和宽度 https://stackoverflow.com/questions/4716284/css-puzzle-how-to-add-background-image-and-set-height-width-on-empty-span.
帮助!我怎样才能做得更好?
<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');
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)