Jquery 更改悬停时的元素样式，但不要'；t在悬停时删除元素样式

演示网站：

目前我有一个解决方案，元素在悬停时改变其样式。示例：我将鼠标悬停在li元素上，javascript添加了图像的跨度，并更改了css的display属性，然后css使鼠标悬停元素以不同的颜色和样式显示。 但我真正需要的是元素在我悬停后保持更改的样式。并在其中一个li元素悬停时激活另一个样式更改

---

如何执行此操作？

您必须在悬停方法中删除handlerOut1。那么就这么做吧：

    $('#main-content #slider-home #top-row ul li:nth-child(1)').hover(handlerIn1, handlerOut1);
$('#main-content #slider-home #top-row ul li:nth-child(2)').hover(handlerIn2, handlerOut2);
    $('#main-content #slider-home #top-row ul li:nth-child(3)').hover(handlerIn3, handlerOut3);
// ... 


function handlerIn1(evt){
    $('#main-content #slider-home #top-row ul li:nth-child(1) span').css({'display':'inline'});
    $('#main-img .active').removeClass("active");
    $('#main-img #group-1').addClass("active").css({
        'opacity':'0'}).animate({opacity:'1'}, 500);
    $('#main-content #slider-home #top-row ul li:nth-child(1)').addClass("ahover");
}   
function handlerOut1(evt){
        $('#main-content #slider-home #top-row ul li:nth-child(1) span').css({'display':'none'});
}   

function handlerIn2(evt){
    $('#main-content #slider-home #top-row ul li:nth-child(2) span').css({'display':'inline'});
    $('#main-img .active').removeClass("active");
    $('#main-img #group-2').addClass("active").css({
        'opacity':'0'}).animate({opacity:'1'}, 500);
}   
function handlerOut2(evt){
    $('#main-content #slider-home #top-row ul li:nth-child(2) span').css({'display':'none'});
}   

function handlerIn3(evt){
    $('#main-content #slider-home #top-row ul li:nth-child(3) span').css({'display':'inline'});
    $('#main-img .active').removeClass("active");
    $('#main-img #group-3').addClass("active").css({
        'opacity':'0'}).animate({opacity:'1'}, 500);
}   
function handlerOut3(evt){
    $('#main-content #slider-home #top-row ul li:nth-child(3) span').css({'display':'none'});
}
//...

以及handlerIn1功能：

$('#main-content #slider-home #top-row ul li').hover(handlerIn1());

如果希望仅在鼠标进入元素时触发，请使用

function handlerIn1() {
    $(this).children('span').css({'display':'inline'});
    $('#main-img .active').removeClass("active");
    $('#main-img #group-1').addClass("active").css({'opacity':'0'}).animate({opacity:'1'}, 500);
    $(this).addClass("ahover");
}

---

没有帮助，它使用的是span，而不是应用于悬停的类。你自己看看。错的不是我的代码，而是你的handlerin函数。我编辑了我的答案。功能有什么问题？由于某些原因，我无法添加具有适当样式的类。每次我将鼠标悬停在关闭位置时，应用类都会自动取消。您希望在悬停一个li时，此li保留悬停样式吗？是的，我希望它保留悬停样式，在我将鼠标悬停在不同元素上后，它们也保留样式，但从上一项中删除悬停样式。

function handlerIn1() {
    $(this).children('span').css({'display':'inline'});
    $('#main-img .active').removeClass("active");
    $('#main-img #group-1').addClass("active").css({'opacity':'0'}).animate({opacity:'1'}, 500);
    $(this).addClass("ahover");
}

$('#main-content #slider-home #top-row ul li:nth-child(1)').mouseenter(handlerIn1)