Menu Image On Hover CSS or jQuery Issue In WordPress

Question

I am facing an issue. I have set an image for every single sub menu by using WordPress plugin. I am able to show the image on menu hover but it is looking very weird. I am guessing it is whether CSS or Jquery Issue.

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

This is the website Link. If you mouse over on products menu then hover on pendant menu trendy and contemporary. You will understand what kind of issue I am facing. I want a smooth solution. This is jquery code but I think it's CSS issue. There are 2 images for menu I just hide the normal one and only show the hovering one when you hover on menu.

        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

Try adding class mptrendyimg to < a > since it is parent element for images :

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

and also use mouseenter instead of mouseover

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

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

});