懸停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();

});