WordPress中悬停CSS或jQuery问题的菜单图像

Question

我遇到了一个问题。我使用 WordPress 插件为每个子菜单设置了一个图像。我可以在菜单悬停时显示图像，但看起来很奇怪。我猜是CSS还是Jquery问题。

http://luxofdubai.com/development/moonstone/product-category/pendants-contemporary/

这是网站链接。如果您将鼠标悬停在产品菜单上，则将鼠标悬停在时尚和现代的吊坠菜单上。你会明白我面临什么样的问题。我想要一个顺利的解决方案。这是 jquery 代码，但我认为这是 CSS 问题。菜单有 2 张图片我只是隐藏了正常的一张，当您将鼠标悬停在菜单上时只显示悬停的一张。

        jQuery(document).ready(function() {



    jQuery(".menu-image").hide();
    jQuery(".hovered-image").hide();

    //Pendant Trendy //
    jQuery(".mptrendy a .menu-image-title").addClass("mptrendyimg");
    jQuery(".mptrendy a .hovered-image").addClass("trendpimage");





        jQuery('.mptrendyimg').mouseover(function () {


          jQuery(".trendpimage").show();

        });

        jQuery('.mptrendyimg').mouseout(function () {


          jQuery(".trendpimage").hide();

        });

        // end Pendant Trendy //

Answer 1

尝试将 mptrendyimg 类添加到 ，因为它是图像的父元素：

    jQuery(".mptrendy a").addClass("mptrendyimg");

并且还使用 mouseenter 代替 mouseover

jQuery('.mptrendyimg').mouseenter(function () {

     jQuery(".trendpimage").show();

});