use .mouseenter(), if you want to trigger only when the mouse enters the elements
$('#main-content #slider-home #top-row ul li:nth-child(1)').mouseenter(handlerIn1)
Frage
<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 for handeling hover effects, sorry I am not very good at 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 I have a solution where element changes its style on hover. Example: I hover over li element, javascript adds span of image, and changes css display attribute, then css makes hover element to be displayed in different color and style. But what I really need is for element to stay with the changed style after I hover off. And activate another change of style when one of the li elements is hovered on.
How can I do this?
Lösung 2
use .mouseenter(), if you want to trigger only when the mouse enters the elements
$('#main-content #slider-home #top-row ul li:nth-child(1)').mouseenter(handlerIn1)
Andere Tipps
You have to remove the handlerOut1 in your hover method. So just do that :
$('#main-content #slider-home #top-row ul li').hover(handlerIn1());
And the handlerIn1 function :
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");
}