Html CSS：图像链接，悬停时更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4717117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: image link, change on hover
提问by AP257
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');
}
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).
但是我遇到了很多问题：div 没有选择 CSS 规则（当我在 Firebug 中查看它时，该元素没有显示相关的 CSS 规则）。
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.
也许这是因为（据我所知）这是无效的 HTML：您不能<a>在<div>. 但是，如果我切换到<span>then ，似乎我会遇到更大的问题，因为您无法可靠地在跨度上设置高度和宽度。
Help! How can I do this better?
帮助！我怎样才能做得更好？
回答by Caspar Kleijne
<a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>
use a class for the link itself and forget the div
为链接本身使用一个类并忘记 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');
}
回答by Dave Loomis
If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.
如果您只有几个地方希望创建此效果，则可以使用以下不需要 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>
Be sure to write the quote marks exactly as they are here, or it will not work.
一定要完全按照此处的格式写引号，否则将不起作用。
回答by Chris Smith
The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.
通过 JavaScript 或 CSS 更改它的问题在于，如果您的连接速度较慢，则图像将需要一秒钟才能更改为悬停版本。这将导致不受欢迎的闪光，因为一个消失而另一个下载。
What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.
我之前所做的是有两个图像。然后根据悬停状态隐藏和显示每个。这将允许在两个图像之间进行干净的切换。
<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;
}
回答by Floern
That could be done with <a>only:
这只能通过<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');
}
回答by stecb
It can be better if you set the a element in this way
如果以这种方式设置 a 元素会更好
display:block;
and then by css spritesset your over background
然后通过css sprites设置你的背景
Edit: check this example out http://jsfiddle.net/steweb/dTwtk/
编辑：看看这个例子http://jsfiddle.net/steweb/dTwtk/
回答by jord8on
You could do the following, without needing CSS...
您可以执行以下操作，而无需 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>
Example: https://jsfiddle.net/jord8on/k1zsfqyk/
示例：https: //jsfiddle.net/jord8on/k1zsfqyk/
This solution was PERFECT for my needs! I found this solution here.
这个解决方案非常适合我的需求！我在这里找到了这个解决方案。
Disclaimer:Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.
免责声明：拥有一个无需 CSS 即可实现的解决方案对我来说很重要，因为我在 Jive-x 云社区平台上设计内容，该平台不允许我们访问全局 CSS。
回答by Lokesh Thakur
<!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("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
回答by wosis
If you give generally give a spanthe property display:block, it'll then behave like a div, i.e you can set width and height.
如果您通常给一个span属性display:block，那么它的行为就会像 a div，即您可以设置宽度和高度。
You can also skip the divor spanand just set the athe to display: blockand apply the backgound style to it.
您也可以跳过divorspan并仅将 thea设置为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>
