如何使图像悬停在 css 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10202641/
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
How to make image hover in css?
提问by greenthunder
I want to change the image from normal to brighter when it's on hover, My code:
我想在悬停时将图像从正常更改为更亮，我的代码：
<div class="nkhome">
<a href="Home.html"><img src="Images/btnhome.png" /></a>
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
为什么悬停不起作用？当我的鼠标在它上面时，它显示第一张图像，而不是悬停图像。
回答by djlumley
You've got an atag containing an imgtag. That's your normal state.
You then add a background-imageas your hover state, and it's appearing in the background of your atag - behind the imgtag.
你有一个a包含img标签的标签。那是你的正常状态。然后添加 abackground-image作为悬停状态，它出现在a标签的背景中- 标签后面img。
You should probably create a CSS sprite and use background positions, but this should get you started:
您可能应该创建一个 CSS 精灵并使用背景位置，但这应该会让您开始：
<div>
<a href="home.html"></a>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
这篇2004 年的 A List Apart 文章仍然具有相关性，它将为您提供一些关于精灵的背景知识，以及为什么使用它们而不是两个不同的图像是个好主意。写得比我能向你解释的任何东西都要好得多。
回答by John Green
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
您正在将图像的背景设置为另一个图像。这很好，但前景（IMG 的 SRC 属性）仍然覆盖其他一切。
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
<a href="Home.html"></a>
</div>
回答by scrypter
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
很简单，不需要额外的 div 或 JavaScript，只需要纯 CSS（jsfiddle 演示）：
HTML
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
回答by Pal Singh
It will not work like this, put both images as background images:
它不会像这样工作，将两个图像都作为背景图像：
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
回答by Rohit Azad
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
嗨，你应该给父位置相对和子绝对位置，并像这样给绝对类的高度或宽度
Css
css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
HTML
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a>
</div>
?
Live demo http://jsfiddle.net/t5FEX/7/
现场演示http://jsfiddle.net/t5FEX/7/
or this
或这个
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>?
Live demo http://jsfiddle.net/t5FEX/9/
回答by Ashish Kwatra
Exact solution to your problem
准确解决您的问题
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
您可以使用content:url("YOUR-IMAGE-PATH")更改悬停时的图像；
For image hover use below line in your css:
对于图像悬停，请在 css 中使用以下行：
img:hover
and to change the image on hover using the below config inside img:hover:
并使用 img:hover 中的以下配置更改悬停时的图像：
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
回答by dzoni
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
这里有一些易于遵循的步骤和一个很棒的悬停教程，它是您可以“玩”和实时测试的示例。
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
回答by Qunect.nl
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
用这个上课。并用自己的宽度和高度制作2个不同的图像。在 ie9 中工作。
See this link.
请参阅此链接。
http://kyleschaeffer.com/development/pure-css-image-hover/
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
您也可以将 2 个不同的图像制作并放置在自类名称中，并在悬停中放置另一个图像。
See example.
参见示例。
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}
