悬停时的Wordpress CSS导航菜单生效

Question

所以我正在构建一个wordpress网站，我在megamenu中有一些产品子菜单。当我将鼠标悬停在子菜单产品链接上以显示megamenu第4列中的特定图像时，我想这样做。我用css尝试了很多选项，但无法弄明白。

所以，作为一个例子，我给了一个特殊的类“.pricomigdale”和图像“.pricomigdale-img”带有“display：none”，所以当我在“Pricomigdale de cocos”上盘旋时采取行动像这样的“.pricomigdale a：hover .pricomigdale-img {display：block}”但没有任何反应。这是网站也许有人可以弄明白：https://thefitbaker.ro

enter image description here

Answer 1

我想吃你的产品;）

我认为如果您发布更多代码可能会有所帮助。

我刚认出你在这里留下了一个分号：{display：block}

应该是{display：block;}

但我不确定这是否能解决你的问题..

Answer 2

我认为这fiddle可以帮助你

重点是您使用链接创建属性，例如data-image带有必要图片的网址

使用JS在悬停时更改图像

$('a').hover(function(e) {
  e.preventDefault();
  $('#photo-container').html('<img src="' + $(this).data('image') + '"/>')
});