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

Question

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

所以，作为一个例子，我给一个链接一个特殊的类“.pricomigdale”和一个带有“display:none”的图像“.pricomigdale-img”，所以当我将鼠标悬停在“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 带有必要图像的 url

并使用 JS 使您的图像在悬停时发生变化

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