Html CSS 样式：将鼠标悬停在图像上时如何更改图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28667568/
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 Styling: How to change the image when it is hovered over?
提问by TL12321
I am trying to make a hovering effect on an image when it's hovered over it will change to another picture. I can't seem to get it to work when I'm not using the anchor tag. My goal is to have the picture change when I hover over a button, which I believe will require some jQuery magic. Here is my code for just trying to change the image when hovered over but somehow not working. Am I missing something?
我试图在图像上悬停效果，当它悬停在它会变成另一张图片时。当我不使用锚标记时，我似乎无法让它工作。我的目标是当我将鼠标悬停在按钮上时改变图片，我相信这需要一些 jQuery 魔法。这是我的代码，用于在悬停时尝试更改图像但不知何故不起作用。我错过了什么吗？
HTML
<div>
<img src="images/newpic.png" class="img-circle homeimage" alt="Responsive image"/>
</div>
CSS
.homeimage {
height:200px;
width: auto;
background-image: url('../images/newpic.png');
}
.homeimage:hover {
background-image: url('../images/funnypic.png');
}
回答by ZEE
here is an exmple using Jquery : this allows you to use hoverwith an imagetag whatever the container is :
这是一个使用 Jquery 的示例：这允许您使用任何容器hover的image标签：
Jquery
查询
$(document).ready(function () {
$('.imgh')
.mouseover(function () {
$(this).attr("src", "http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg");
})
.mouseout(function () {
$(this).attr("src", "http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
});
});
HMTL
HMTL
<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="rajkumar" class="imgh"></img>
回答by Enjayy
This wont work because you are putting the class on an image tag try making the img into a div and give it a height and width check out this js fiddle
这不起作用，因为您将类放在图像标签上尝试将 img 变成一个 div 并给它一个高度和宽度，看看这个 js fiddle
.container{
width 100%;
height: 500px;
}
.picture {
height:500px;
width: 500px;
background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
background-repeat:no-repeat;
}
.picture:hover {
background-image: url('http://www.online-image-editor.com//styles/2014/images/example_image.png');
}<div class="container">
<div class="picture">
</div>
</div>回答by Stella
You can be solved only with CSS.
你只能用CSS来解决。
HTML
HTML
<img class="img-circle homeimage" alt="Responsive image"/>
CSS
CSS
.homeimage {
height:200px;
width: auto;
background: url('https://www.google.co.kr/images/hpp/lightbulb-icon-39x39.png') no-repeat;
}
.homeimage:hover {
background: url('http://www.google.com/images/logos/url_shortener_logo.gif') no-repeat;
}
回答by PRAH
If you want to change the img which is called from html you can try this solution without jquery and javascript. http://jsbin.com/sujigakeru/8/edit
如果您想更改从 html 调用的 img，您可以在没有 jquery 和 javascript 的情况下尝试此解决方案。http://jsbin.com/sujigakeru/8/edit
HTML
HTML
<div class="container">
<div class="content">
<img src="http://www.makemenoise.com/wp-content/uploads/2012/08/wordpress-logo-200x200.png" alt="Responsive image"/>
</div>
<div class="hover">
<img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" alt="">
</div>
</div>
CSS
CSS
.container{
width:200px;
height:200px;
position:relative;
}
.hover{
display:none;
position:absolute;
top:0;
left:0;
z-index:1;
}
.container:hover .hover{
display:block;
}
回答by K K
You can achieve this using css too. you need to change the background image on hover of a button:
您也可以使用 css 来实现这一点。您需要在按钮悬停时更改背景图像：
CSS:
CSS：
img {
display:block;
width:400px;
height:300px;
background-image:url("http://lorempixel.com/600/200/sports/1/")
}
.css:hover ~ img {
background-image:url("http://lorempixel.com/600/200/sports/2/")
}
<button class="css">CSS</button>
<img src="/image.png" />
Make sure the element order is maintained. Button should come first before image.
确保保持元素顺序。按钮应该在图像之前出现。
