关于html：CSS：在img：hover上更改图像src


CSS: Change image src on img:hover

我需要更改hover上的源URL。

我已经尝试过了，但是不起作用：

的HTML

1
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

的CSS

1
2
3
#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

任何帮助，将不胜感激。

更新：

这仅适用于Webkit / Google Chrome。

相关讨论

仅使用html和css，无法更改图像的src。如果确实将img标签替换为div标签，则可以更改设置为背景的图像，例如

1
2
3
4
5
6
div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

如果您认为可以使用一些JavaScript代码，则应该可以如下更改img标签的src

1
2
3
4
5
6
7
function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
1
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

相关讨论

我修改了与Patrick Kostjens相关的一些更改。

1
2
3
4
<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=""/>

演示

http://jsfiddle.net/ssuryar/wcmHu/429/

相关讨论

我有一个类似的问题，但是我的解决方案是要有两张图像，一张隐藏(显示：无)，另一张可见。将鼠标悬停在周围跨度上时，原始图像更改为display：none，另一图像更改为display：block。 (根据您的情况，可以使用"内联"代替)

本示例使用两个span标签而不是图像，因此您可以在此处运行时查看结果。不幸的是，我没有任何在线图像来源可以使用。

1
2
3
4
5
6
7
8
9
#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}
1
2
3
4
<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

相关讨论

您可以做的是通过将width和height设置为0来作弊，以隐藏实际图像并应用一些CSS来完成您想要的事情：

1
2
3
4
5
6
7
8
9
10
#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标签具有所需大小(实际图像大小的一半)。

小提琴

相关讨论

这是使用纯CSS的替代方法。这个想法是在HTML标记中包括两个图像，并在：hover上相应地显示或隐藏这些图像。

的HTML

1
2
   <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" />

的CSS

1
2
3
4
5
6
7
8
9
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/

请注意，所使用的图像具有相同的尺寸以便正确显示。另外，这些图像文件的大小非常小，因此在这种情况下加载多个图像不是问题，但是如果您要切换大尺寸图像的显示，则可能是这样。

相关讨论

我还有一个解决方案。如果有人使用AngularJs：
http://jsfiddle.net/ec9gn/30/

1
2
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />

Javascript：

1
2
3
function ctrl($scope){
    $scope.img= '000';
}

没有CSS ^^。

相关讨论

我有类似的问题-我想替换：hover上的图片，但由于缺少Bootstrap的自适应设计，因此无法使用BACKGRUND-IMAGE。

如果您喜欢我只想在：hover上更改图片(但不坚持更改某些图像标签的SRC)，则可以执行以下操作-这是仅CSS的解决方案。

HTML：

1
2
3
4
5
6
<li>

  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">

</li>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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图像。

由于您无法使用CSS更改src：如果选择jQuery，请检查此小提琴。

演示版

1
2
3
4
5
6
7
8
$('#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库来完成这项工作。

小提琴

同意AshisKumar的回答，有一种方法可以使用jQuery功能更改鼠标悬停时的图片网址，如下所示：

1
2
3
4
5
6
7
8
9
10
11
$(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
    });
 });
相关讨论

就个人而言，我会选择一种JavaScript / jQuery解决方案。这不仅保持了HTML的语义(即，将图像显示为img元素，并且其在标记中定义了通常的src图像)，而且，如果您使用JS / jQuery解决方案，那么您还可以使用JS / jQuery预加载您的悬停图像。

预加载悬停图像将意味着当用户将鼠标悬停在原始图像上时，没有下载延迟，从而使您的网站表现得更加专业。

这确实意味着您对JS有依赖性，但是没有启用JS的极少数人可能不会太着急-并且其他所有人都会获得更好的体验...并且您的代码也将很好！

关于语义，到目前为止，我不喜欢任何解决方案。因此，我个人使用以下解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}
1
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />

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

以下代码适用于Chrome和Firefox

1
<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=""/>

为此，您可以使用以下代码

1)HTML

1
 

2)CSS

1
2
3
4
5
6
7
8
9
10
11
#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');

}

您不能使用css更改img src。您可以使用以下纯CSS解决方案。
HTML：

1
 

CSS：

1
2
3
4
5
6
7
8
9
#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解决方案。
HTML：

1
<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery的：

1
2
3
$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

您不能使用CSS更改img标记的src属性。可以使用Javascript onmouseover()事件处理程序。

HTML：

1
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

Javascript：

1
2
3
function hover() {
  document.getElementById("my-img").src ="http://dummyimage.com/100x100/eb00eb/fff";
}
相关讨论

在较旧的浏览器上，:hover仅适用于元素。因此，您必须执行此类操作才能使其正常工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

这是纯CSS解决方案。将可见图像放置在img标签中，将第二个图像作为背景放置在CSS中，然后在悬停时隐藏该图像。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.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;
}          



<ul>

<li class='but1'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>
Blog
</p>
</li>

<li class='but2'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>
Herrero
</p>
</li>

<li class='but3'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>
Loftin
</p>
</li>

<li class='but4'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>
Contact
</p>
</li>


</ul>

更改图像src的最佳方法是：

1
<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

观看现场演示：http://www.audenaerde.org/csstricks.html#imagereplacecss

请享用！

尝试此代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
   .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;

        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <!DOCTYPE html>

    <html lang="en">

    <head>

    Image Change on Hover with CSS

 
    </head>

    <body>

       

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

       

    </body>

    </html>