CSS：图片链接，hover更改
我有一个链接的图像。 当用户hover在链接上时，我想显示不同的图像。
目前我正在使用这个代码：
<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>那么看起来我会遇到更大的问题，因为您无法可靠地设置跨度的高度和宽度 。
帮帮我！ 我怎样才能做得更好？
<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'); }
如果你只有几个地方你想创build这个效果，你可以使用下面的HTML代码，不需要CSS。 只要插入它。
<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>
一定要把这些引号正好写在这里，否则将不起作用。
这可以用<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'); }
你可以做到以下几点，而不需要CSS …
<a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>
例如： https ： //jsfiddle.net/jord8on/k1zsfqyk/
这个解决scheme是完美的满足我的需求！ 我在这里find这个解决scheme
免责声明： 有一个没有CSS的解决scheme对我来说很重要，因为我在Jive-x云社区平台上devise了内容，而这个平台并没有让我们访问全球CSS。
通过JavaScript或CSS改变它的问题是，如果你有一个较慢的连接，图像将需要一秒钟更改为hover版本。 这会导致不希望的闪光，因为一个人在下载时消失。
我之前做的是有两个图像。 然后隐藏并显示每个取决于hover状态。 这将允许两个图像之间的干净切换。
<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; }
如果你给一个span属性display:block ，它将performance得像一个div ，即你可以设置宽度和高度。
您也可以跳过div或span ，只需将a设置为display: block然后将背景样式应用于其中。
<a href="" class="myImage"><!----></a> <style> .myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;} .myImage:hover{background-image(image_hover.png);} </style>
<!DOCTYPE html> <html lang="en"> <head> <title>Change Image on Hover in CSS</title> <style type="text/css"> .card { width: 130px; height: 195px; background: url("..http://img.dovov.compic.jpg") no-repeat; margin: 50px; } .card:hover { background: url("..http://img.dovov.comanotherpic.jpg") no-repeat; } </style> </head> <body> <div class="card"></div> </body> </html>
