Sanjeev K Sanjeev K - 1 year ago 108
HTML Question

Change image url on div hover instead image hover

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

I have:

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


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

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

Answer Source

If this is the HTML

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

then this will work:

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

  function() {$(this).find("img").attr("src", "images/logo-white.png");},
  function() {$(this).find("img").attr("src", "images/logo-black.png");}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download