使用CSS / HTML更改hover图片

我有这个问题，我已经设置图像来显示另一个图像时，鼠标hover，但是第一个图像仍然出现，新的不改变高度和宽度，重叠另一个。 我对HTML / CSS仍然很陌生，所以我可能错过了一些简单的东西。 这里是代码： 

<img src="LibraryTransparent.png" id="Library"> 
 #Library { height: 70px; width: 120px; } #Library:hover { background-image: url('LibraryHoverTrans.png'); height: 70px; width: 120px; }

一个解决scheme是使用第一个图像作为背景图像，如下所示： 

 <div id="Library"></div> 
 #Library { background-image: url('LibraryTransparent.png'); height: 70px; width: 120px; } #Library:hover { background-image: url('LibraryHoverTrans.png'); }

如果您的图片大小不同，则必须像这样设置它们： 

 #Library:hover { background-image: url('LibraryHoverTrans.png'); width: [IMAGE_WIDTH_IN_PIXELS]px; height: [IMAGE_HEIGHT_IN_PIXELS]px; }

另一个select是使用JS： 

 <img src='LibraryTransparent.png' width='120' height='70' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

我通常做的是用两种状态创build一个双重图像，就像是一种双帧电影，然后我用它作为原始元素的背景，以便元素具有以像素为单位设置的宽度/高度，从而显示只有一半的形象。 那么hover状态所定义的基本上是“移动电影显示其他帧”。

例如，想像图像必须是灰色的Tux，我们需要在hover时更改为丰富多彩的Tux。 而“托pipe”元素是一个ID为“tuxie”的跨度。

  1. 我创build了两个Tuxes，一个是彩色和其他灰色的50×25图像，
  2. 然后将图像分配为25 x 25的背景，
  3. 最后将hover设置为仅剩下25px的背景。

最小的代码： 

 <style> #tuxie { width: 25px; height: 25px; background: url('images/tuxie.png') no-repeat left top; } #tuxie:hover { background-position: -25px 0px } </style> <div id="tuxie" />

和图像：

两架Tuxie“电影”

优点是：

  • 通过将两个帧放在一个文件中，确保它们一次加载。 这样可以避免在其他帧不会立即加载的情况下连接速度较慢的丑陋故障，所以第一次hover永远不能正常工作。

  • 以这种方式pipe理你的图像可能会更容易，因为“配对”的框架永远不会混淆。

  • 通过使用Javascript或CSSselect器，可以扩展这个function，并在一个文件中包含更多的帧。

    从理论上讲，你甚至可以在单个文件中放置多个button，并通过坐标来pipe理它们的显示，尽pipe这样的方法可能会很快失去控制。

请注意，这是使用background CSS属性构build的，所以如果您确实需要使用<img /> s，则不能设置src属性，因为它与背景重叠。 （认为​​在这里巧妙地使用透明度可能会导致有趣的结果，但可能非常依赖于图像质量以及引擎的质量）。

使用content ： 

 #Library { height: 70px; width: 120px; } #Library:hover { content: url('wp-content/uploads/2010/05/2.jpg'); height: 70px; width: 120px; }

的jsfiddle

所有以前的答案的问题是，hover图像没有加载页面，所以当浏览器调用它时，需要时间来加载，整个事情看起来不太好。

我所做的是将原始图像和hover图像放在1个元素中，并首先隐藏hover图像。 然后在hover的时候，我显示hover的图像，隐藏旧的图像，在hover的时候，我做的是相反的。

HTML： 

 <span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')"> <img src="stylesheetshttp://img.dovov.combell.png" class=bell col="g"> <img src="stylesheetshttp://img.dovov.combell_hover.png" class=bell style="display:none" col="b"> </span>

的JavaScript / jQuery的： 

 function hvr(dom, action) { if (action == 'in') { $(dom).find("[col=g]").css("display", "none"); $(dom).find("[col=b]").css("display", "inline-block"); } else { $(dom).find("[col=b]").css("display", "none"); $(dom).find("[col=g]").css("display", "inline-block"); } }

这对我来说是最简单和最有效的方法。

您可以replaceHTML IMG的图像，而无需对容器div进行任何背景图像更改。

这是通过使用CSS属性box-sizing: border-box; （这给你一个非常有效的把一种hover效果放在<IMG>上的可能性。）

要做到这一点，像这样的类应用到您的图像： 

 .image-replacement { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://akamaicovers.oreilly.comhttp://img.dovov.com9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */ width: 180px; height: 236px; padding-left: 180px; }

示例代码： http : //codepen.io/chriscoyier/pen/cJEjs

原文： http ： //css-tricks.com/replace-the-image-in-an-img-with-css/

希望这将有助于你们不想放置div来获得具有“hover”效果的图像。

在这里发表示例代码：

HTML： 

 <img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery的： 

 $("#myImage").mouseover(function () { $(this).attr("class", "image-replacement"); }); $("#myImage").mouseout(function () { $(this).attr("class", "ClassBeforeImage-replacement"); });

你不能使用CSS来改变图像的SRC属性（除非浏览器支持）。 您可能希望使用jQuery与hover事件。 

 $("#Library ").hover( function () { $(this).attr("src","isHover.jpg"); }, function () { $(this).attr("src","notHover.jpg"); } ); 
 .hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */ .hide {display:none} /* Do the shift: */ .hover_image:hover img:first-child{display:none} .hover_image:hover img:last-child{display:inline-block} 
 <body> <a class="hover_image" href="#"> <!-- path/to/first/visible/image: --> <img src="http://farmacias.dariopm.com/cc2/_cc3http://img.dovov.comf1_silverstone_2016.jpg" /> <!-- path/to/hover/visible/image: --> <img src="http://farmacias.dariopm.com/cc2/_cc3http://img.dovov.comf1_malasia_2016.jpg" class="hide" /> </a> </body>

将img标签更改为一个div，并在CSS中给它一个背景。

检查这个小提琴

我认为你的情况可能是错误的

语法看起来不错 

 background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');

尝试其中之一 

 <img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

或者如果您使用图像作为button的forms 

 <input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()"> function fnover() { var myimg2 = document.getElementById("proceed"); myimg2.src = "images/icons/proceed_button2.png"; } function fnout() { var myimg2 = document.getElementById("proceed"); myimg2.src = "images/icons/proceed_button.png"; } 
 .foo img:last-child{display:none} .foo:hover img:first-child{display:none} .foo:hover img:last-child{display:inline-block} 
 <body> <a class="foo" href="#"> <img src="http://lojanak.com/image/9/280/280/1/0" /> <img src="http://lojanak.com/image/0/280/280/1/0" /> </a> </body>

问题是你通过'src'属性设置第一个图像，并在hover添加到图像背景图像。 尝试这个：

在html中使用： 

 <img id="Library">

然后在CSS中： 

 #Library { height: 70px; width: 120px; background-image: url('LibraryTransparent.png'); } #Library:hover { background-image: url('LibraryHoverTrans.png'); }

在做事情的方式，它不会发生。 您正在更改被原始图像阻挡的图像的背景图像。 改变高度和宽度也不会发生。 要更改图像的src属性，您需要使用Javascript或Javascript库（如jQuery）。 但是，您可以将图像更改为简单的div（文本）框，并且在hover时更改背景图像，即使div框本身将为空。 就是这样。 

 <div id="emptydiv"></div> #emptydiv { background-image: url("LibraryHover.png"); height: 70px; width: 120px;

} 

 #emptydiv:hover { background-image: url("LibraryHoverTrans.png"); height: 700px; width: 1200px; }

我希望这是你所要求的:)

与大家回答使用背景图像选项，他们缺less一个属性。 高度和宽度将设置图像的容器大小，但不会调整图像本身的大小。 背景大小是需要压缩或拉伸图像以适应这个容器。 我使用了“最佳答案”的例子 

 <div id="Library"></div> #Library { background-image: url('LibraryTransparent.png'); background-size: 120px; height: 70px; width: 120px; } #Library:hover { background-image: url('LibraryHoverTrans.png'); }

只需使用Photoshop，创build两个相同的图像，第一个是你想要它看起来，第二个是你想要它看起来当它是hover的时候。 我将图片封装在<a>标签中，因为我假设它是您想要的。 对于这个例子，我正在做一个不饱和的Facebook图标，但是当它hover时，它会显示Facebook的蓝色。 

 <a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

我的jQuery解决scheme。 

 function changeOverImage(element) { var url = $(element).prop('src'), url_over = $(element).data('change-over') ; $(element) .prop('src', url_over) .data('change-over', url) ; } $(document).delegate('img[data-change-over]', 'mouseover', function () { changeOverImage(this); }); $(document).delegate('img[data-change-over]', 'mouseout', function () { changeOverImage(this); });

和HTML 

 <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

演示： JSFiddle演示

问候

现场示例： JSFiddle

接受的答案有一些问题。 图像没有在那里resize。 使用background-size属性来调整图像的大小。

HTML： 

 <div id="image"></div>

CSS： 

 #image { background-image: url('image1'); background-size: 300px 390px; width: 300px; height:390px; } #image:hover{ background: url("image2"); background-size: 300px 390px; }

这是一个简单的窍门。 只需复制并粘贴即可。 

 <!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("..http://img.dovov.comcard-back.jpg") no-repeat; margin: 50px; } .card:hover { background: url("..http://img.dovov.comcard-front.jpg") no-repeat; } </style> </head> <body> <div class="card"></div> </body> </html>

我会build议只使用CSS，如果可能的话。 我的解决scheme是：

HTML： 

 <img id="img" class="" src="" />

CSS： 

 img#img{ background: url("pictureNumberOne.png"); background-size: 100px 100px; /* Optional transition: */ transition: background 0.25s ease-in-out; } img#img:hover{ background: url("pictureNumberTwo.png"); background-size: 100px 100px; }

（不定义src属性）也可以确保透明图像（或带有透明部分的图像）正确显示（否则，如果第二张图片是半透明的，您也将看到第一张图片的一部分）。

background-size属性用于设置背景图像的高度和宽度。

如果（出于任何原因）你不想改变图像的bg图像，你也可以把图像放在一个div容器中，如下所示：

HTML： 

 <div id="imgContainer" class=""> <img id="" class="" src="" /> </div>

… 等等。

Interesting Posts

下载网页和依赖关系，包括CSS图像

base64编码的图像在电子邮件签名

如何使用jQuery设置图像的src

图像预加载器如何工作？

是否有可能在Android TextView中显示来自HTML的内嵌图像？

在活动中的全屏幕背景图像

获取图像大小，但不将图像加载到内存中

由新位图（filePath）locking的免费文件

如何使用PHP合并透明的PNG和图像？

免费工具来创build/编辑PNG图像？