Javascript 悬停时更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10886828/
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
Changing image on hover
提问by fuddin
I need a menu consisting of images and the images should change when someone hover around it.
我需要一个由图像组成的菜单，当有人将鼠标悬停在它周围时，图像应该会发生变化。
HTML
HTML
<div id="menu" >
<a href="#" id="home"><img src="images/about.png" alt="logo" /></a>
</div>
CSS
CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
The problem I am facing is that when I hoveraround the menu item, the image to be displayed on hover is displayed at the back ofthe old image. Moreover, the hover background image displayed is very smallin width and height. Please help out. Thanks ![enter image description here][1]
我面临的问题是，当我将鼠标悬停在菜单项周围时，悬停时要显示的图像显示在旧图像的背面。而且，显示的悬停背景图像的宽度和高度都非常小。请帮忙。谢谢！[在此处输入图片说明][1]
采纳答案by fuddin
Place this code just before the closing body tag,
将此代码放在结束正文标记之前，
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
place the class home in the imgtag. Done. Works perfectly.
将班级置于img标签中。完毕。完美运行。
回答by Pablo Rincon
As previously stated, no need for a JS solution.
如前所述，不需要 JS 解决方案。
Another way of doing it is by loading both images and hiding/showing them with the :hoverevent. Something like this:
另一种方法是加载图像并在:hover事件中隐藏/显示它们。像这样的东西：
HTML:
HTML：
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
CSS：
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
回答by Nick Rolando
Here is a js/jquery solution
这是一个 js/jquery 解决方案
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
html：
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)
这是一个工作示例。快乐编码:)
回答by Andrew Morton
This works:
这有效：
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" id="home"><img src="lPr4m.png" alt="logo" /></a>
</div>
</body>
</html>
(Image names changed for my convenience making the page.)
（为了方便制作页面，图像名称已更改。）
回答by maksbd19
you need to use positionrule while using a z-indexrule. Try adding position:relativewhere you used z-index.
使用position规则时需要使用z-index规则。尝试添加position:relative您使用的位置z-index。
回答by Keith
You're calling <img src="images/about.png" alt="logo" />twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.
您调用了<img src="images/about.png" alt="logo" />两次，一次在 html 中，一次在 css 中。我建议删除 html 并严格使用 css 背景图像。您也不需要 z-index。
回答by Josh Allen
Remove the imgtag, and set the width and height of #home(and any other menu item) to the width and height of the images.
删除img标签，并将#home（和任何其他菜单项）的宽度和高度设置为图像的宽度和高度。
Also, set the content to whatever the altof the image would be (for accessibility purposes), and then set the text-indentproperty so it's moved offpage.
此外，将内容设置为alt图像的任何内容（出于可访问性目的），然后设置text-indent属性以便将其移出页面。
Currently, when you hover, it's changing the background image, but the imgtag is on top, and it always will be.
目前，当您悬停时，它正在更改背景图像，但img标签在顶部，并且始终如此。
HTML
HTML
<div id="menu" >
<a href="#" id="home">Home</a>
</div>
CSS
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}
回答by albert
you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above
你可以做 a:hover img{display:none} 这将摆脱 img, idk 关于尺寸问题 bc 你没有指定尺寸。如果我是你，我要么放弃 img 元素，将其用作元素的背景图像，然后在 :hover 上更改它。或者，如果您想要 img 元素，请遵循与上述相同的原则使用 clip 属性
回答by kristina childs
are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
你只是想做一个简单的图像翻转吗？没有看到工作示例，我无法确切地弄清楚您要做什么，但是使用 CSS 精灵很容易实现图像翻转，不需要 jquery，这使得网站更加防弹。它还使您的网站响应更快，因为默认图像和超状态图像是相同的图像，无需预加载代码。
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
如果您需要映射图像（而不是完全交换），则可以使用背景图像、容器 div 和 png-24 图形来完成（使 png-24s 在 IE6 中工作所需的 javascript，但谁在乎不再支持 IE6反正？）。
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
在不使用 javascript 的情况下更改导航图像的一个好方法是使用 background-position 属性，如下所示：
// define your container element
#nav-home {
margin: 20px 5px;
height: 15px;
width: 40px;
}
// use a descendant selector to style the <a> tag
#nav-home a {
background-image: url("/images/buttons-nav.gif");
display: block; // THIS IS VERY IMPORTANT!!
background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
height: 15px;
}
// this is where you change the position of the background for the hover state
#nav-home a:hover {
background-position: -20px 0; //this moved it 20px to the right
}
and your html code would look like this:
您的 html 代码如下所示：
<div id="nav-home"><a href="/yourlink/"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;"></a>
<!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gifthen all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
您的图像实际上将同时包含打开和关闭状态，如下所示：http: //www.w3schools.com/css/img_navsprites_hover.gif那么您所做的就是将图像移动到一侧以显示 :hover 状态。（代码示例在http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav）。您基本上是在制作一个带有容器 div 的窗口，然后只显示实际背景图像的一部分。
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.
另外，不要在标签以外的任何东西上使用 :hover ，因为并非所有浏览器都支持在块级元素上使用 :hover 。
回答by Sean H. Worthington
And now for the simple way:
现在以简单的方式：
<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>
This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.
此 HTML 将在鼠标悬停时将图像更改为新图片，并在鼠标移开时将其恢复为第一张图片。
