在div悬停时更改图像网址而不是图像悬停

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

我试图在鼠标悬停时更改图像的网址，它的工作正常，但我正在尝试的是，将鼠标悬停在div而不是图像上并更改图像网址

following the jQuery I have:

遵循jQuery我：

$(".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!

如何在div悬停上制作它？请帮忙！

3 个解决方案

#1

If this is the HTML

如果这是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 }

替代方案：.hover - 使用较少}

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

#2

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

#3

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/

#1