jquery - 悬停交换图像

Question

我有 2 个下拉菜单，即 NEW 和 SHOP

当我将鼠标悬停在新菜单 1 上时，它应该显示相关图像，当我将鼠标悬停在新菜单 2 上时，它应该在具有类“.menu-viewer”的 div 中显示相关图像。

现在这有效，但它也改变了商店菜单的图像。

此外，默认情况下不会显示商店的默认图像。

请引用我创建的 Fiddle 并告诉我我做错了什么。

我希望我已经清楚地解释了我的问题。听起来有点困惑，请随时问我。

https://jsfiddle.net/cancerian73/qwtono6c/

 var $img = $('.menu-viewer  img'),
 dsrc = $img.attr('src');
 $('.menu-list ul li a').hover(function() {
 var $this = $(this).addClass('hover');
  $img.attr('src', $this.data('image'));
 }, function() {
 $(this).removeClass('hover');
$img.attr('src', dsrc);
 });


 $('.menu-list ul li').bind('mouseenter focusin',function() {
 $($(this).attr('href')).show();
 }).bind('mouseleave focusout',function() {
 $($(this).attr('href')).hide();
 });

Answer 1

您需要更改当前 block 内的图像。在下文中，我使用了 jQuery closest 来获取最近的祖先 megamenu 并根据它更改了图像:

$('.menu-list ul li a').hover(function() {
  var $this = $(this).addClass('hover'),
    $img = $this.closest('.megamenu').find('.menu-viewer  img');
    
  $this.data('original', $img.attr('src'));
  $img.attr('src', $this.data('image'));
}, function() {
  var $this = $(this),
    $img = $this.closest('.megamenu').find('.menu-viewer  img');
  
  $this.removeClass('hover');
  $img.attr('src', $this.data('original'));
});

ul {
  list-style: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="javascript:void(0)">NEW MENU</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-4">
              <div class="menu-list">
                <ul>
                  <li id="menulist1"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 1">NEW MENU 1</a></li>
                  <li id="menulist2"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 2</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer"><img src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
<li>
  <a href="javascript:void(0)">Shop</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-2">
              <div class="menu-list">
                <ul>
                  <li id="menulist3"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 1">SHOP 1</a></li>
                  <li id="menulist4"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 2">SHOP 2</a></li>
                  <li id="menulist5"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 3">SHOP 3</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer">
                <img src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</li>

根据评论编辑

$('.menu-list ul li a').hover(function() {
  var $this = $(this).addClass('hover'),
    $images = $this.closest('.megamenu').find('.menu-viewer  img');

  $images.eq(0).addClass('hidden');
  $images.eq(1).attr('src', $this.data('image')).removeClass('hidden');

}, function() {
  var $this = $(this),
    $images = $this.closest('.megamenu').find('.menu-viewer  img');
    
  $images.eq(1).addClass('hidden');
  $images.eq(0).removeClass('hidden');
});

ul {
  list-style: none
}

.menu-viewer {
  position: relative;
}

.hidden {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

img {
  position: relative;
  opacity: 1;
  transition: opacity 0.75s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="javascript:void(0)">NEW MENU</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-4">
              <div class="menu-list">
                <ul>
                  <li id="menulist1"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 1">NEW MENU 1</a></li>
                  <li id="menulist2"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 2</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer"><img src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection" />
                <img class="hidden" src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
<li>
  <a href="javascript:void(0)">Shop</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-2">
              <div class="menu-list">
                <ul>
                  <li id="menulist3"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 1">SHOP 1</a></li>
                  <li id="menulist4"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 2">SHOP 2</a></li>
                  <li id="menulist5"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 3">SHOP 3</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer">
                <img src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
                <img class="hidden" src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>