javascript - 如何在两个图像之间切换

Question

首先，有一个未完成的现场演示 - https://jsfiddle.net/johndoe1992/xcqm8enj/

所以，我有两个 div - .one和 .two

默认情况下，在 .one 内还有另一个 div - .container

内部.container有两张图片 - .first和 .second

.container在 .one 之间动态切换和 .two

在 .one 之间切换和 .two这不是问题，真正的问题是:

1) 如果.container的 parent() 是 .one : 当我将鼠标悬停在 .one 上时它必须显示图像 .first (最好淡入/淡出)。图片 .second仍然“显示:无”

2) 如果.container的 parent() 是 .two : 当我将鼠标悬停在 .two 上时它必须显示图像 .second (也淡入/淡出)。图片 .first - “显示:无”

这个应用程序的可见部分看起来像那个例子https://jsfiddle.net/johndoe1992/o8grgfaL/但是内部有很多差异，如您所见

请帮帮我

Answer 1

而是使用 this 获取上下文:

$(document).ready(function() {

  $('.one, .two').on({
    mouseenter: function() {
      $(this).find('img').stop().fadeIn();
    },
    mouseleave: function() {
      $(this).find('img').stop().fadeOut();
    }
  });

});

Fiddle