在 div 悬停时更改图像 url 而不是图像悬停答案

【问题标题】：Change image url on div hover instead image hover在 div 悬停时更改图像 url 而不是图像悬停
【发布时间】：2016-08-22 17:51:48
【问题描述】：

我正在尝试在鼠标悬停时更改图像的 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 悬停？请帮忙！

【问题讨论】：

你有没有唯一的图片类或id？
没有唯一的类，图像只是放在一个 div 中

标签： jquery html hover

【解决方案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 - 使用较少 }

$(".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");
 }

【讨论】：

不正确的 jQuery。 jQuery 对象没有 .src

【解决方案3】：

试试这个

$('.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/

【讨论】：

那仍然只是悬停在图像上。