如何在鼠标悬停时更改 < img > 标记的源代码？

小提琴

同意 AshisKumar 的回答，< br > 有一种方法可以通过使用 jQuery 功能来改变鼠标上的图像 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 是你的一个选项，检查这个小提琴。

演示

$('#aks').hover(
function(){
$(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
},
function(){
$(this).attr('src','http://dummyimage.com/100x100/000/fff')
}
)

它基本上使用的是 .hover()方法... 它需要两个函数来使其工作。当你进入和退出悬停时。

我们使用 .attr(属性的缩写)来更改 src属性。

值得注意的是，您需要像小提琴中那样包含 jQuery 库来实现此功能。

不能使用 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。 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 解决方案。 网址:

<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');


}

只使用 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');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

你所能做的就是通过将 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标签的大小，你希望它有(一半的大小，你的实际图像)。

小提琴

我还有一个办法，如果有人用 AngularJ: 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 ^ ^ 。

我有类似的问题-我想替换图片: 悬停，但不能使用背景图像，由于缺乏引导的自适应设计。

如果你喜欢我只想改变图片: 悬停(但不坚持改变 SRC 的某些图像标签) ，你可以这样做-这是 CSS-only 解决方案。

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 图像的定位，而不是通过不透明。

在较老的浏览器上，: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>

就个人而言，我会选择 JavaScript/jQuery 解决方案之一。这样不仅可以保持 HTML 语义(例如，图像显示为 img 元素，在标记中定义了通常的 src 图像) ，而且如果使用 JS/jQuery 解决方案，还可以使用 JS/jQuery 对悬停图像进行 预载处理。

预载悬停图像将意味着有可能没有下载延迟时，用户悬停在原始图像，导致您的网站行为更专业。

这确实意味着你依赖于 JS，但是极少数没有启用 JS 的人可能不会太担心——而且其他人会得到更好的体验... 而且你的代码也会很好！

我修改了一些与 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>

演示

Http://jsfiddle.net/ssuryar/wcmhu/429/

这里有一个纯 CSS 解决方案。将可见图像放入 img 标记中，将第二张图像放入 css 中作为背景，然后将图像隐藏在鼠标悬停处。

.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 a p{
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

好好享受吧！

我也遇到过类似的问题，但我的解决方案是有两个图像，一个隐藏(显示: 无)和一个可见。当鼠标悬停在一个周围跨度上时，原始图像变为 display: none，另一个图像变为 display: block。(根据您的情况，可以使用‘ inline’代替)

此示例使用两个 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>

下面的代码同时适用于 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 的替代方法。其思想是在 HTML 标记中包含这两个图像，并在: hover 上相应地显示或隐藏这些图像

超文本标示语言

<a>
<img src="https://cdn4.iconfinder.com/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;
}

https://jsfiddle.net/m4v1onyL/

请注意，所使用的图像尺寸相同，以便进行适当的显示。此外，这些图像文件的大小相当小，因此加载多个不是一个问题，在这种情况下，但可能是如果您正在寻找切换显示大型图像。

试试这个代码。

   .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>

关于语义，我不喜欢迄今为止给出的任何解决方案。因此，我个人使用以下解决方案:

.img-wrapper {
display: inline-block;
background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}


.img-wrapper > img {
vertical-align: top;
}


.img-wrapper > img:hover {
opacity: 0;
}

<div class="img-wrapper">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

这是一个只有 CSS 的解决方案，具有良好的浏览器兼容性。它使用一个图像包装器，该包装器具有一个最初被图像本身隐藏的背景。在悬停时，图像通过不透明度隐藏，因此背景图像变得可见。这样，在标记代码中就不会有一个空的包装器，而是一个真正的图像。

还有另外一种简单的方法，只使用 HTML 和 CSS! < br > < br > 只要像这样用 div 包装您的 <img>标记:

<div class="image-wrapper">
<img src="http://dummyimage.com/100x100/000/fff">
</div>

然后，在 CSS 文件中隐藏 img 并为包装 div 元素设置背景图像:

.image-wrapper:hover {
background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
background-size: contain;
background-repeat: no-repeat;
}


.image-wrapper:hover img {
display: none;
}

就是这样！