jquery - 更改 div 悬停上的图像 url 而不是图像悬停

Question

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

按照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>

如何使其在 div 上悬停？请帮忙!

Answer 1

如果这是 HTML

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

然后这将起作用:

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

替代方案:.hover - 使用 less }

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