悬停时更改元素样式，但不删除悬停时的元素样式

Question

<div id="main-img">

<div id="group-1"  class="active" >
<div id="image"><?php /*<img src="<?php bloginfo('template_url'); ?>/img/image1.jpg" />*/ echo get_the_post_thumbnail($posts[0]->ID); ?></div>
<div id="name"><?php $custom = get_post_custom($posts[0]->ID); $color = $custom['title_color'][0]; echo "<span style='color:{$color};'>" . get_the_title($posts[0]->ID) . '</span>' ;?></div>
<div id="description"><?php echo $posts[0]->post_content; ?></div>
<div id="link"><a href="<?php  /*echo var_dump($custom); */echo $custom['URL'][0]; unset($custom)?>">Plačiau</a>></div>
</div><!-- END OF GROUP 1-->

<div id="group-2">
<div id="image"><?php echo get_the_post_thumbnail($posts[1]->ID); ?></div>
<div id="name"><?php $custom = get_post_custom($posts[1]->ID); $color = $custom['title_color'][0]; echo "<span style='color:{$color};'>" . get_the_title($posts[1]->ID) . '</span>' ;?></div>
<div id="description"><?php echo $posts[1]->post_content; ?></div>
<div id="link"><a href="<?php echo $custom['URL'][0]; unset($custom);?>">Plačiau</a>></div>
</div><!-- END OF GROUP 2-->

<div id="group-3">
<div id="image"><?php echo get_the_post_thumbnail($posts[2]->ID); ?></div>
<div id="name"><?php $custom = get_post_custom($posts[2]->ID); $color = $custom['title_color'][0]; echo "<span style='color:{$color};'>" . get_the_title($posts[2]->ID) . '</span>';?></div>
<div id="description"><?php echo $posts[2]->post_content; ?></div>
<div id="link"><a href="<?php echo $custom['URL'][0]; unset($custom); ?>">Plačiau</a>></div>
</div><!-- END OF GROUP 3-->

...

处理悬停效果的Javascript，抱歉我不太擅长 编写 Javascript。

    $('#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'});
}
//...

演示网站：http://piguskompiuteris.lt/polikopija/

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

我该怎么做？

Answer 1

您必须在悬停方法中删除 handlerOut1。所以就这样做吧：

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

还有 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");
}

Answer 2

使用.mouseenter()，如果你只想在鼠标进入元素时触发

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