CSS：更改img：hover上的图像src
我需要更改hover <img>源url。
我已经尝试过，但不会工作：
HTML
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>
CSS
#my-img:hover { content: url('http://dummyimage.com/100x100/eb00eb/fff'); }
的jsfiddle
任何帮助，将不胜感激。
更新：
这仅适用于Webkit / Google Chrome。
只有html和css，它不可能改变图像的src。 如果你用div标签取代img标签，那么你可能会改变设置为背景的图像
div { background: url('http://dummyimage.com/100x100/000/fff'); } div:hover { background: url('http://dummyimage.com/100x100/eb00eb/fff'); }
如果你认为你可以使用一些JavaScript代码，那么你应该可以改变img标签的src，如下所示
function hover(element) { element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff'); } function unhover(element) { element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff'); }
和HTML是
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
我修改了与Patrick Kostjens有关的一些变化。
<a href="#"> <img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'" onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'" border="0" alt=""/></a>
DEMO
你可以做的是通过将width和height设置为0来隐藏实际图像并应用一些CSS来做你想要的：
#aks { width:0px; height:0px; background:url('http://dummyimage.com/100x100/000/fff'); padding:50px; } #aks:hover { background: url('http://dummyimage.com/100x100/eb00eb/fff'); }
而填充使img标签的大小，你想要它（实际图像的一半大小）。
小提琴
我有一个类似的问题，但我的解决scheme是有两个图像，一个隐藏（显示：无），一个可见。 在将鼠标hover在周围的范围上时，原始图像将更改为显示：无，另一个图像显示为：块。 （根据您的情况，可以使用“内联”）
这个例子使用两个span标签而不是图片，所以你可以在这里看到结果。 我没有任何在线图片来源不幸的使用。
#onhover { display: none; } #surround:hover span[id="initial"] { display: none; } #surround:hover span[id="onhover"] { display: block; }
<span id="surround"> <span id="initial">original</span> <span id="onhover">replacement</span> </span>
我还有一个解决scheme。 如果有人使用AngularJs： http : //jsfiddle.net/ec9gn/30/
<div ng-controller='ctrl'> <img ng-mouseover="img='eb00eb'" ng-mouseleave="img='000'" ng-src='http://dummyimage.com/100x100/{{img}}/fff' /> </div>
Javascript：
function ctrl($scope){ $scope.img= '000'; }
没有CSS ^^。
小提琴
同意AshisKumar的回答，
有一种方法可以通过使用jQueryfunction来更改鼠标移动的图像url，如下所示：
$(function() { $("img") .mouseover(function() { var src = $(this).attr("src").match(/[^\.]+/) + "over.gif"; $(this).attr("src", url1); //URL @the time of mouse over on image }) .mouseout(function() { var src = $(this).attr("src").replace("over", ""); $(this).attr("src", url2); //default URL }); });
因为你不能用CSS来改变src ：如果jQuery是你的select，请检查这个小提琴。
演示
$('#aks').hover( function(){ $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff') }, function(){ $(this).attr('src','http://dummyimage.com/100x100/000/fff') } )
基本上使用.hover()方法…它需要两个函数来使其工作。 当你进入hover和当你退出。
我们使用.attr （short for attribute）来改变src属性。
值得一提的是，你需要像小提琴一样包含jQuery库来完成这个工作。
我有类似的问题 – 我想replace图片：hover，但由于缺乏Bootstrap的自适应devise，不能使用BACKGRUND-IMAGE。
如果你喜欢我只想改变图片：hover（但不是坚持改变某些图片标签的SRC），你可以做这样的事情 – 这是纯CSS的解决scheme。
HTML：
<li> <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg"> <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg"> </li>
CSS：
li { position: relative; overflow: hidden; } li img.hoverPhoto { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; } li.hover img { /* it's optional - for nicer transition effect */ opacity: 0; -web-kit-transition: opacity 1s ease; -moz-transition: opacity 1s ease;li -o-transition: opacity 1s ease; transition: opacity 1s ease; } li.hover img.hoverPhoto { opacity: 1; }
如果你想要IE7兼容的代码，你可以隐藏/显示：通过定位而不是不透明的HOVER图像。
就我个人而言，我会去与一个JavaScript / jQuery解决scheme。 这不仅保留了你的HTML语义（即，图像被显示为一个img元素，通常在标记中定义了src图像），但是如果你使用JS / jQuery解决scheme，那么你也可以使用JS / jQuery 预载你的hover图像。
预加载hover图片意味着当用户将鼠标hover在原始图片上时，可能没有下载延迟，从而导致您的网站行为更专业。
这意味着你对JS有一个依赖，但是那些没有启用JS的小部分可能不会太过分 – 而且其他人都会得到更好的体验…而且你的代码也会很好！
这是一个使用纯CSS的替代方法。 这个想法是在HTML标记中包含这两个图像，并相应地显示或隐藏这些图像：hover
HTML
<a> <img src="data/icons/imoticons/105/imoticon_15-128.png" /> <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" /> </a>
CSS
a img:last-child { display: none; } a:hover img:last-child { display: block; } a:hover img:first-child { display: none; }
jsfiddle： https ：//jsfiddle.net/m4v1onyL/
请注意，所使用的图像具有相同的尺寸以便正确显示。 此外，这些图像的文件大小非常小，所以在这种情况下加载多个不是问题，但可能是如果您正在寻找切换大尺寸图像的显示。
你不能用CSS来改变img标签的src属性。 可能使用Javascript onmouseover()事件处理程序。
HTML：
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>
使用Javascript：
function hover() { document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff"; }
你不能使用CSS来更改img src。 你可以使用下面的纯CSS解决scheme。 HTML：
<div id="asks"></div>
CSS：
#asks { width: 100px; height: 100px; background-image: url('http://dummyimage.com/100x100/0000/fff'); } #asks:hover { background-image: url('http://dummyimage.com/100x100/eb00eb/fff'); }
或者，如果您不想使用带有背景图片的div，则可以使用javascript / jQuery解决scheme。 HTML：
<img id="asks" src="http://dummyimage.com/100x100/000/fff" />
jQuery的：
$('#asks') .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');}) .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});
为此，您可以使用下面的代码
1）html
<div id = "aks"> </div>
2）css
#aks { width:100px; height:100px; background-image:url('http://dummyimage.com/100x100/000/fff');} #aks:hover { background-image:url('http://dummyimage.com/100x100/eb00eb/fff'); }
在较老的浏览器上， :hover只能在<a>元素上工作。 所以你必须做这样的事情才能使它工作。
<style> a#aks { width:100px; height:100px; display:block; } a#aks:link { background-image: url('http://dummyimage.com/100x100/000/fff'); } a#aks:hover { background-image: url('http://dummyimage.com/100x100/eb00eb/fff'); } </style> <a href="#" id="aks"></a>
以下代码同时适用于Chrome和Firefox
<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>
下面是一个纯粹的CSS解决scheme。 将可见图像放在img标签中，将第二个图像作为背景放在css中，然后隐藏hover的图像。
.buttons{ width:90%; margin-left:5%; margin-right:5%; margin-top:2%; } .buttons ul{} .buttons ul li{ display:inline-block; width:22%; margin:1%; position:relative; } .buttons ul li ap{ position:absolute; top:40%; text-align:center; } .but1{ background:url('scales.jpg') center no-repeat; background-size:cover; } .but1 a:hover img{ visibility:hidden; } .but2{ background:url('scales.jpg') center no-repeat; background-size:cover; } .but2 a:hover img{ visibility:hidden; } .but3{ background:url('scales.jpg') center no-repeat; background-size:cover; } .but3 a:hover img{ visibility:hidden; } .but4{ background:url('scales.jpg') center no-repeat; background-size:cover; } .but4 a:hover img{ visibility:hidden; } <div class='buttons'> <ul> <li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li> <li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li> <li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li> <li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li> </ul> </div>
改变图像的src的最好方法是：
<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
查看现场演示： http ： //www.audenaerde.org/csstricks.html#imagereplacecss
请享用！
试试这个代码。
.card { width: 200px; height: 195px; position: relative; display: inline-block; } .card .img-top { display: none; position: absolute; top: 0; left: 0; z-index: 99; width:200px; } .card:hover .img-top { display: inline; }
<!DOCTYPE html> <html lang="en"> <head> <title>Image Change on Hover with CSS</title> </head> <body> <div class="card"> <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px"> <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front"> </div> </body> </html>
