更改元素的風格，但不刪除上懸停的元素風格了

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 HANDELING懸停效果，對不起，我不是很擅長 編寫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

使用.mouseenter()，如果要觸發只有當鼠標進入的元素

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

Answer 2

您必須刪除懸停方法中的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"); 
}