这是我根据在此处找到的一段代码尝试过的内容，当将鼠标放在菜单中的文本上时，我修改为拥有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
注意：将鼠标悬停在“我们的葡萄酒”上