1

DEMO LINK

As you can see on the link above I am trying to change the image when mouse hover but it's not working atm. What should I change? The parent <div> already has one hover on it.

.preview a img:hover{
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');    
}
user3187469
  • 1,461
  • 7
  • 23
  • 31
  • possible duplicate of [CSS: Change image src on img:hover](http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) – Hashem Qolami Mar 08 '14 at 11:03

5 Answers5

5

You are trying to change the background-image css on an <img> tag. This will not change the "src" attribute. in order to do that, you will need a JavaScript solution.

using jQuery:

$(".preview a img").hover(function(){
    $(this).attr("src","new-image.jpg")
});

EDIT: if you're using CSS3, and it's ok for you that not all browsers will support it, you can do:

.preview a img:hover{
    content:url("new-image.jpg");
}

EDIT 2: working fiddle - http://jsfiddle.net/j3xDR/

EDIT 3: due to requests that it will work via a parent div, here is a full example with both options:

http://jsfiddle.net/j3xDR/1/

Shay Elkayam
  • 4,128
  • 1
  • 22
  • 19
  • Can you post a working fiddle as none of these is working for me. There is a hover effect for the complete div as well. – user3187469 Mar 08 '14 at 11:06
  • `img:hover { content:url(); }` only works on Webkit web browsers if i'm not wrong. – Hashem Qolami Mar 08 '14 at 11:07
  • @HashemQolami, I started my answer with this sentence: if you're using CSS3, and it's ok for you that NOT ALL BROWSERS will support it, you can do: – Shay Elkayam Mar 08 '14 at 11:11
  • you need to remove the `a` from your selector. working fiddle: http://jsfiddle.net/gw6w9/4/ – T J Mar 08 '14 at 11:11
  • I want to change the image hover when mouse hovers over parent div at any place, not directly over image. – user3187469 Mar 08 '14 at 11:24
  • @user3187469, I've updated the fiddle for you. it now contains two options to do it. http://jsfiddle.net/j3xDR/1/ – Shay Elkayam Mar 08 '14 at 11:27
4

As Shay Elkayam's answer suggested, you can use the content property in modern browsers to achieve this.

If browser support is a problem, then i suggest using a <div> instead if the <img> tag and change the divs background property on hover.

here's a working fiddle

update:

if you want to change the image on hover of the parent div, modify the css selector as in this working : fiddle

T J
  • 42,762
  • 13
  • 83
  • 138
1

As per the HTML code the CSS is not matching: using .preview a img will be wrong as you are calling the img tag in side the a tag in your CSS.

However your HTML says that you have img tag inside the div class=preview and a tag is above all.

There are multiple ways to achieve the output. One of the easiest way is as follows:

EDIT: As per the comment the edited script was posted as below: 

 $(".preview").hover(function() {
    $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
    }, function() {
    $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")

    })

Please jQuery in your HTML and write the above script, if you are not using CSS3.

Fiddle Demo is also modified

Murtaza
  • 3,045
  • 2
  • 25
  • 39
0

You could do the same thing in css as well if you do a little bit of modifications in your css

Check this updated fiddle

http://jsfiddle.net/gw6w9/1/

Here in .preview img rule, I set the height to 45px as well since, the actual image is 200px x 200px and you have set the width as 45px meaning it will scale the height to 45px as well and I set the background-image to the initial image as well. so when it loads the grey image is loaded.

I also modified your rule .preview a img:hover to .preview:hover img because

1) I don't see an a under .preview

2) You hover over the div anyway.

under this rule you can set the background-image to the new url.

Hope this works for you

anurupr
  • 2,294
  • 2
  • 20
  • 28
  • 1
    well you removed the `src` of the img tag entirely. now you might as well tell him that you can't change the image source using css in all browsers and suggest him to replace it with a div and play with its background-image property.. – T J Mar 08 '14 at 11:16
0

As per related answers given by others, i have modified a small change without any extra javascript nor css. It works in all versions

<a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC" onmouseover="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC'" onmouseout="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC'" border="0" alt=""/></a>

DEMO

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

Surya R Praveen
  • 3,393
  • 1
  • 24
  • 25