如何在两个图像之间切换

Question

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

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

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

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

.container在.one和.two

之间动态切换

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

1）如果.container的父（）是.one： 当我将鼠标悬停在.one上时，它必须显示图像.first（淡入/淡出更可取）。图片.second仍然“显示：无”

2）如果.container的父（）是.two： 当我将鼠标悬停在.two上时，它必须显示图片.second（淡入/淡出）。图片.first - “display：none”

此应用程序的可见部分看起来就像示例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