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

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添加到<a>，因为它是图像的父元素：

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

并使用mouseenter代替mouseover

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

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

});