如何在Magento 2中将图像悬停在静态图像上?

时间:2019-05-02 20:46:21

标签: javascript css magento magento2

这是我根据在此处找到的一段代码尝试过的内容,当将鼠标放在菜单中的文本上时,我修改为拥有6张图像。这个想法是用悬停链接上的另一个替换静态图像。我可以获取它以显示图像,但仅在链接下方,而我想越过左侧的特定图像。不,我使用的是Magento2。似乎是类或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>
        

然后我尝试在实际的magento 2 Mega菜单上查看其如何与当前主题配合使用,这就是我得到的https://bacawinesm2-stage.smarterspecies.com/home-test2

注意:将鼠标悬停在“我们的葡萄酒”上

0 个答案:

没有答案