Change image url on div hover instead image hover

Question

I am trying to change the url of image on mouseover, its working fine but what I am trying is, hover on div instead of image and change the image url

following the jQuery I have:

$(".logo > img").on({
   "mouseover" : function() {
   this.src = 'images/logo-white.png';
   },
   "mouseout" : function() {
   this.src='images/logo-black.png';
 }

HTML

<div class="logo">
   <img src="images/logo-white.png">
</div>

How do I make it on div hover? please help!

Do you have any unique class or id for image?

Rahul Patel
– Rahul Patel

2016-08-22 09:33:34 +00:00
Commented Aug 22, 2016 at 9:33 — Rahul Patel
– Rahul Patel, Commented Aug 22, 2016 at 9:33
No unique class, image is just placed within a div

Sanjeev Kumar
– Sanjeev Kumar

2016-08-22 09:35:23 +00:00
Commented Aug 22, 2016 at 9:35 — Sanjeev Kumar
– Sanjeev Kumar, Commented Aug 22, 2016 at 9:35

mplungjan · Accepted Answer · 2016-08-22 09:51:48Z

5

If this is the HTML

<div class="logo">
   <img src="images/logo-white.png">
</div>

then this will work:

$(".logo").on({
  "mouseover": function() {
    $(this).find("img").attr("src", "images/logo-white.png");
  },
  "mouseout": function() {
    $(this).find("img").attr("src", "images/logo-black.png");
  }
});

Alternative: .hover - which is using less }

$(".logo").hover(
  function() {$(this).find("img").attr("src", "images/logo-white.png");},
  function() {$(this).find("img").attr("src", "images/logo-black.png");}
);

edited Aug 22, 2016 at 9:51

answered Aug 22, 2016 at 9:36

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Patel · Accepted Answer · 2016-08-22 09:39:59Z

0

$(".logo").on({
   "mouseover" : function() {
     $(".logo img").attr("src","images/logo-white.png");
   },
   "mouseout" : function() {
   $(".logo img").attr("src","images/logo-white.png");
 }

edited Aug 22, 2016 at 9:39

answered Aug 22, 2016 at 9:36

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

1 Comment

mplungjan Over a year ago

incorrect jQuery. A jQuery object does not have a .src

Lalji Tadhani · Accepted Answer · 2016-08-22 09:45:44Z

0

try this

$('.logo').hover(function () {
             $(this).find('img').attr('src','images/logo-white.png');
           }, 
                    function () {
              $(this).find('img').attr('src','images/logo-black.png');
           }
        );

https://jsfiddle.net/nkugogop/2/

edited Aug 22, 2016 at 9:45

answered Aug 22, 2016 at 9:40

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

1 Comment

mplungjan Over a year ago

That still only hovers the image.

Collectives™ on Stack Overflow

Change image url on div hover instead image hover

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related