这是一个下拉菜单，当它上面挂着一个图像时，它将被更改为图像的悬停版本，现在是当前的静止状态，问题或我的问题是鼠标悬停在子菜单上图像中的图像将回到它的原始图像，而不是悬停的图像版本，我希望它在悬停在它的子菜单上时保持悬停的图像。
这是代码，如果这可以帮助您理解。
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>
答案 0 :(得分：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');
})
});
});
答案 1 :(得分：0)
尝试在Jquery中再包含一个类：
$('.main-menu > li, .main-menu > li > li').on('mouseover', function(){
}