jquery - Change element style on hover in, but don't remove element style on hover out -

<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 hover effects, sorry not @ writing 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'}); } //... 

demo website: http://piguskompiuteris.lt/polikopija/

currently have solution element changes style on hover. example: hover on li element, javascript adds span of image, , changes css display attribute, css makes hover element displayed in different color , style. need element stay changed style after hover off. , activate change of style when 1 of li elements hovered on.

how can this?

use .mouseenter(), if want trigger when mouse enters elements

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