悬停时更改图像
[英]Changing image on hover
问题描述
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 hover around the menu item, the image to be displayed on hover is displayed at the back of the old image.我面临的问题是，当我将鼠标悬停在菜单项周围时，悬停时要显示的图像显示在旧图像的背面。 Moreover, the hover background image displayed is very small in width and height.而且，显示的悬停背景图像的宽度和高度都非常小。 Please help out.请帮忙。 Thanks谢谢
10 个解决方案
解决方案1
26 2012-06-04 20:47:33
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 :hover event.另一种方法是加载图像并使用:hover事件隐藏/显示它们。 Something like this:像这样的东西：
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
}
解决方案2
18 2012-06-04 19:38:11
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 :)快乐编码:)
解决方案3
4 已采纳 2012-06-04 19:48:19
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 img tag.将类 home 放在img标签中。 Done.完毕。 Works perfectly.完美运行。
解决方案4
3 2012-06-04 19:38:36
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.) （为了方便制作页面，图像名称已更改。）
解决方案5
2 2012-06-04 19:12:29
You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css.您调用<img src="images/about.png" alt="logo" />两次，一次在 html 中，一次在 css 中。 I suggest deleting the html and strictly using css background image.我建议删除 html 并严格使用 css 背景图像。 You don't need the z-index either.您也不需要 z-index。
解决方案6
2 2012-06-04 19:12:48
Remove the img tag, 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 alt of the image would be (for accessibility purposes), and then set the text-indent property so it's moved offpage.此外，将内容设置为图像的任何alt （出于可访问性目的），然后设置text-indent属性，使其移出页面。
Currently, when you hover, it's changing the background image, but the img tag 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;
}
解决方案7
2 2012-06-04 19:13:16
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.你可以做 a:hover img{display:none} 这将摆脱 img, idk 关于尺寸问题 bc 你没有指定尺寸。 if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover.如果我是你，我要么放弃 img 元素，将其用作元素的背景图像，然后在 :hover 上更改它。 or if you want the img element, use the clip property following the same principles as above或者，如果您想要 img 元素，请遵循与上述相同的原则使用 clip 属性
解决方案8
2 2012-06-04 20:18:12
you need to use position rule while using a z-index rule.您需要在使用z-index规则时使用position规则。 Try adding position:relative where you used z-index .尝试在您使用z-index地方添加position:relative 。
解决方案9
1 2012-06-04 21:22:08
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.没有看到工作示例，我无法确切地弄清楚您要做什么，但是使用 CSS 精灵很容易实现图像翻转，不需要 jquery，这使得网站更加防弹。 it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.它还使您的网站响应更快，因为默认图像和超状态图像是相同的图像，无需预加载代码。
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.gif then all you are doing is moving the image to one side to show the :hover state.您的图像实际上将同时包含打开和关闭状态，如下所示： http : //www.w3schools.com/css/img_navsprites_hover.gif那么您所做的就是将图像移动到一侧以显示 :hover 状态。 (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav ). （代码示例在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.您基本上是在制作一个带有容器 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 。
解决方案10
0 2019-08-27 04:49:47
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 将在鼠标悬停时将图像更改为新图片，并在鼠标移开时将其恢复为第一张图片。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.