JQuery change img src on hover doesnt work

Question

I am trying to change the img src on hover with JQuery. I am using Brackets, and when I run a live Chrome preview its all good. But when I open the file directly on Chrome it doesn't work (same with IE).

My code:

$("#logo img").hover(
    function(){
              $("#logo img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo img").attr("src","/images/img2.gif");
});

Edit: This is the HTML code:

<div id="logo">
    <img id="logo-img" src="images/img1.gif" alt="logo">
</div>

The img tag has an id "logo-img", but using this id directly doesn't help:

$("#logo-img").hover(
    function(){
              $("#logo-img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo-img").attr("src","/images/img2.gif");
});

Your help is appreciated.

please, post the html code that refers to #logo img... but I suggest you to give a class or id to the img to access it directly, like: $('.elementClass).hover — Calvin Nunes, Jan 19 '18 at 10:39
Please, give me the path of the file with the code and with img. — newman, Jan 19 '18 at 10:39
Possible duplicate of [Change the image source on rollover using jQuery](https://stackoverflow.com/questions/540349/change-the-image-source-on-rollover-using-jquery) — azjezz, Jan 19 '18 at 10:39
Your id is not *really* valid? You can not use spaces in them. Also provide HTML for this. Your JQuery is fine. — ICanKindOfCode, Jan 19 '18 at 10:40
Also are you providing the images in the correct directory when opening with chrome? — ICanKindOfCode, Jan 19 '18 at 10:41
Please be more specific as of whart exactly doesn't work, and what happens instead. Here you are probably missing that the exchange `src` you are providing starts with a `/`, whereas the original `src` attribute doesn't. — connexo, Jan 19 '18 at 11:40

Nims Patel · Answer 1 · 2018-01-19T11:01:38.257

Using CSS

img:hover {
  background: url("https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
  /* padding: [image-height] [image-width] 0 0 */
  padding: 200px 200px 0 0;
  width: 0;
  height: 0;
}

<img src="https://www.vacul.org/extension/site/design/site//images/anonymous-user.png" />

Using JS

$("#imghover").hover(function(){
  $(this).attr("src", "https://www.vacul.org/extension/site/design/site//images/anonymous-user.png");
}, function(){
  $(this).attr("src", "https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="imghover" src="https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1">

score 0 · Accepted Answer · answered Jan 19 '18 at 10:57

It should work. Try this:

$("#myImage").hover(function(){
  $(this).attr("src", "https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg");
}, function(){
  $(this).attr("src", "https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="myImage" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg">

Try running it. It is probably a problem with your image ID. Also use $(this) to make it easier.

Youre welcome! Consider marking this as accepted answer by clicking the grey tick mark left of the answer under the downvote sign. — ICanKindOfCode, Jan 19 '18 at 12:00

JQuery change img src on hover doesnt work

2 Answers2