使用 Jquery 鼠标离开后如何更改图像并保持不变

Question

这是一个下拉菜单，当鼠标悬停在上面时，它会变成图像的悬停版本，这就是现在的情况，问题或我的问题是鼠标悬停在什么时候图像的子菜单将返回到它的原始图像，这不是悬停图像版本，我希望它在悬停在它的子菜单上时保持悬停图像。

如果可以帮助您理解，请提供以下代码。

jQuery(function($){ 
    $('.main-menu > li').on('mouseover', function(){
  /*$(this).find('.sub-menus').css('display', 'block');*/       
  $(this).find('.sub-menus').show();
        /*$(this).children('a').addClass('on');*/
 });
    $('.main-menu > li').on('mouseleave', function(){
  /*$(this).find('.sub-menus').css('display', 'none');*/
  $(this).find('.sub-menus').hide();
        /*$(this).children('a').removeClass('on');*/
 });
    
    $('.main-menu > li').find('a').hover(function() {
        var target = $(this).find('img').attr('src');
        var newTarg = target.replace('.png', '_hover.png');
        $(this).find('img').attr("src", newTarg);
    }, function() {
        var target = $(this).find('img').attr('src');
        var newTarg = target.replace('_hover.png', '.png');
        $(this).find('img').attr("src", newTarg);
    });
}); 

<div class="mid-header">
    <div class="wrapper">
        <ul class="main-menu">
            <li class="item-menu01">
                <a href="#" class="item-menu-text01"><img src="../images/tit/tit_main_menu01.png"/></a>
                <div class="sub-menus">
                    <div class="wrapper">
                       <div class="left-curve">
                            <ul class="sub-menu-items right-curve">
                                <li>
                                    <a href="#" class="item-submenu01-01">
                                        <img src="../images/tit/tit_submenu_01_01.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu01-02">
                                        <img src="../images/tit/tit_submenu_01_02.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu01-03">
                                        <img src="../images/tit/tit_submenu_01_03.png"/>
                                    </a>
                                </li>
                                <li class="last-child">
                                    <a href="#" class="item-submenu01-04">
                                        <img src="../images/tit/tit_submenu_01_04.png"/>
                                    </a>
                                </li>
                            </ul>
                       </div>
                    </div>
                </div>
            </li>
            <li class="item-menu02">
                <a href="#" class="item-menu-text02"><img src="../images/tit/tit_main_menu02.png"/></a>
                <div class="sub-menus">
                    <div class="wrapper">
                        <div class="left-curve">
                            <ul class="sub-menu-items right-curve">
                                <li>
                                    <a href="#" class="item-submenu02-01">
                                        <img src="../images/tit/tit_submenu_02_01.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu02-02">
                                        <img src="../images/tit/tit_submenu_02_02.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu02-03">
                                        <img src="../images/tit/tit_submenu_02_03.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu02-04">
                                        <img src="../images/tit/tit_submenu_02_04.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu02-05">
                                        <img src="../images/tit/tit_submenu_02_05.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-submenu02-06">
                                        <img src="../images/tit/tit_submenu_02_06.png"/>
                                    </a>
                                </li>
                                <li class="last-child">
                                    <a href="#" class="item-submenu02-07">
                                        <img src="../images/tit/tit_submenu_02_07.png"/>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 1

问题出在图像悬停上，您的目标是锚元素，因此当您移动到子菜单时，锚元素的 mouseleave 事件将触发，悬停图像将替换为默认图像。

jQuery(function ($) {
    $('.main-menu > li').hover(function () {
        /*$(this).find('.sub-menus').css('display', 'block');*/
        $(this).find('.sub-menus').show();
        /*$(this).children('a').addClass('on');*/
    }, function () {
        /*$(this).find('.sub-menus').css('display', 'none');*/
        $(this).find('.sub-menus').hide();
        /*$(this).children('a').removeClass('on');*/
    });

    $('.main-menu li').hover(function () {
        $(this).find('> a > img').attr('src', function (i, src) {
            return src.replace('.png', '_hover.png');
        })
    }, function () {
        $(this).find('> a > img').attr('src', function (i, src) {
            return src.replace('_hover.png', '.png');
        })
    });
});

Answer 2

尝试在您的 Jquery 中再添加一个 class：

$('.main-menu > li, .main-menu > li > li').on('mouseover', function(){

}