Показать сообщение отдельно
  #1 (permalink)  
Старый 18.08.2013, 23:36
Новичок на форуме
Отправить личное сообщение для noob13 Посмотреть профиль Найти все сообщения от noob13
 
Регистрация: 18.08.2013
Сообщений: 2

addClass/removeClass при наведении мышкой
Есть javascript код:
$('#navigation li').hover(
		function() {
			var position = $("#navigation li").index(this);
			position++;
			var position_before = position-1;
			var position_after = position+1;
			var position_befor_before = position_before-1;
			
			if(position <10) { position = "0"+position; }
			if(position_before <10) { position_before = "0"+position_before; }
			if(position_after <10) { position_after = "0"+position_after; }
			if(position_before_before <10) { position_before_before = "0"+position_before_before; }
			
			if(position%2) {
				$("#nav_"+position).addClass('navigatin_main_hover');
				if(position!=6) { $("#nav_"+position_after).addClass('navigation_hover_01');	}
				if(position!=1) { $("#nav_"+position_before).addClass('navigation_hover_02'); }
			} else {
				
				$("#nav_"+position).addClass('navigation_hover_01');
				$("#nav_"+position_before).addClass('navigatin_main_hover');
				if(position_before_before!=0)$("#nav_"+position_before_before).addClass('navigation_hover_02');				
			}
				
		},
		function(){
				$("#navigation li").removeClass('navigatin_main_hover');
				$("#navigation li").removeClass('navigation_hover_01');
				$("#navigation li").removeClass('navigation_hover_02'); 
		}
	)
});

Так же есть html и css:
<div id="navigation">
	<ul>
		<li id="nav_1" class=""><a href="#">ГЛАВНАЯ</a></li>
		<li id="nav_2" class=""><a href="#">главная</a></li>
		<li id="nav_3" class=""><a href="#">КОМАНДА</a></li>
		<li id="nav_4" class=""><a href="#">команда</a></li>
		<li id="nav_5" class=""><a href="#">ФОРУМ</a></li>
		<li id="nav_6" class=""><a href="#">форум</a></li>
<!--и т.д.-->
	</ul>
</div>
<script type="text/javascript" src="hover.js"></script>
<script type="text/javascript" src="jquery_lib.js"></script>

Код:
/*CSS*/
.navigatin_main_hover, .navigation_hover_02 { background-position:bottom; }
.navigation_hover_01 { background-position:center; }
Задача заключается в следующем: Нужно, что бы при наведении на ссыль, элемент менял свой класс и как в следствии свой background-position. (простым пседвоклассом :hover не имеет смысла, так как кнопка которая выделяется имеет не один background-image, а 2.
Помогите, пожалуйста, сделать так, что бы скрипт работал. Сам полный нуб, не разбирающийся в скриптах. Но очень хочу научится! Помогите, люди добрые.
Ответить с цитированием