Как заставить мое изображение навести курсор на статическое изображение в Magento 2?

Question

Это то, что я пробовал, основываясь на фрагменте кода, который я нашел здесь, который я изменил, чтобы 6 изображений все зависали, когда мышь помещает текст в меню. Идея состоит в том, чтобы заменить статическое изображение на другое при наведении ссылки. Я могу заставить его показать изображение, но чуть ниже ссылки, тогда как я хочу перейти к этому конкретному изображению слева. Не я использую Magento 2. Похоже, проблема класса или CSS. Вот мой код.

https://jsfiddle.net/mbuckley/7r189vzq/61/

/*
$('.onhover-toggle-child-class').on(
	'mouseenter mouseleave',
  function() {
    var element = $(this);
    var selector = element.data('target');
    var child = element.find(selector);
    var classes = element.data('toggle');


    child.toggleClass(classes);
  }
);*/

var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
  var element = event.srcElement || event.target;
  var selector = element.getAttribute('data-target');
  var classes = element.getAttribute('data-toggle').split(' ');
  var childs = element.querySelectorAll(selector);
  console.log(selector, classes, childs);
  childs.forEach(function(child) {
    classes.forEach(function(toggleClass) {
      if (child.classList.contains(toggleClass))
        child.classList.remove(toggleClass);
      else
        child.classList.add(toggleClass);
    });
  });
}

elements.forEach(function(element) {
  element.addEventListener('mouseenter', onhover);
  element.addEventListener('mouseleave', onhover);
});

.on-top {
  z-index: 99;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.shown {
  display: block;
}

.hidden {
  display: none;
}

<div class="on-top">
  <ul class="sub-menu">
    <li class="menu-item">
      <ul>
        <img src="https://bacawinesm2-stage.smarterspecies.com/media/wysiwyg/BACA/dominoes_mobile.png" alt="image" />
      </ul>
    </li>
    <li class="menu-item">
      <ul>
        <li>
          <a href="{{config path=" web/secure/base_url "}}2016-baca-double-dutch-zinfandel" class="relative onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">
            <div class="menu-item__content-wrapper on-top">
              <h3>{{trans "Double Dutch"}}</h3>
              <p>{{trans "Dusi Vineyard Paso Robles"}}</p>
              <span class="absolute target hidden on-top">
      <img src="http://winefolly.com/wp-content/uploads/2014/01/washington-wine-vineyards-400x400.jpg" alt="image" />
    </span>
            </div>
          </a>

          <li>
            <a href="{{config path=" web/secure/base_url "}}2016-baca-i-spy-zinfandel" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="hidden shown">
            <div class="menu-item__content-wrapper on-top">
                <h3>{{trans "I Spy"}}</h3>
                <p>{{trans "Howell Mountain Napa Valley"}}</p>
                <span class="absolute target2 on-top hidden">
                              <img src="http://winefolly.com/wp-content/uploads/2014/01/Oregon-wine-vineyards-400x400.jpg" alt="image" />
                              </span>
              </div>
            </a>
          </li>
      </ul>
      </li>

      <li class="menu-item">
        <ul>
          <li>
            <a href="{{config path=" web/secure/base_url "}}2016-baca-cat-s-cradle-zinfandel" class="relative onhover-toggle-child-class" data-target=".target3" data-toggle="hidden shown">
            <div class="menu-item__content-wrapper on-top">
                <h3>{{trans "Cat’s Cradle"}}</h3>
                <p>{{trans "Rockpile Sonoma County"}}</p>
                <span class="absolute target3 hidden on-top">
      <img src="https://3q8aqw1n2x7v12z4672101ry-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/jerichocanyonvineyards1-400x400.jpg
" alt="image" />
    </span>
              </div>
            </a>

            <li>
              <a href="{{config path=" web/secure/base_url "}}2016-baca-tug-o-war-zinfandel" class="relative onhover-toggle-child-class" data-target=".target4" data-toggle="hidden shown">
            <div class="menu-item__content-wrapper on-top">
                  <h3>{{trans "Tug O’ War"}}</h3>
                  <p>{{trans "Maffei Vineyard Russian River"}}</p>
                  <span class="absolute target4 on-top hidden">
                              <img src="https://i.pinimg.com/736x/7a/9d/7f/7a9d7f1133c1467dac30279bcba9beda.jpg" alt="image" />
                              </span>
                </div>
              </a>
            </li>
        </ul>
        </li>


 <li class="menu-item">
        <ul>
          <li>
           <a href="{{config path=" web/secure/base_url "}}2016-baca-cat-s-cradle-zinfandel" class="relative onhover-toggle-child-class" data-target=".target5" data-toggle="hidden shown">
            <div class="menu-item__content-wrapper on-top">
                    <h3>{{trans "Marbles - NEW!"}}</h3>
                    <p>{{trans "Pocai Vineyard Calistoga"}}</p>
                <span class="absolute target5 hidden on-top">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/5c/8e/d6/5c8ed643345e067ed207b352a04fe6ae.jpg" alt="image" />
    </span>
              </div>
            </a>

            <li>
              <a href="{{config path=" web/secure/base_url "}}2016-baca-tug-o-war-zinfandel" class="relative onhover-toggle-child-class" data-target=".target6" data-toggle="hidden shown">
            <div class="menu-item__content-wrapper on-top">
                    <h3>{{trans "Ring Around the Rose"}}</h3>
                    <h3>{{trans "NEW!"}}</h3>
                    <p>{{trans "California Rose of Zinfandel"}}</p>
                  <span class="absolute target6 on-top hidden">
                              <img src="https://pbs.twimg.com/profile_images/354283671/Lone_Kauri_Feat._Coromandle_small_400x400.JPG" alt="image" />
                              </span>
                </div>
              </a>
            </li>
        </ul>
        </ul>
        

Затем я пытаюсь посмотреть, как он будет работать с моими текущими темами в настоящем Мега Меню 2, и вот что я получу https://bacawinesm2 -stage.smarterspecies.com / home-test2

Примечание: наведите курсор на «Наши вина»