Hover для элементов списка с одинаковым номером
Добрый день!
Ситуация такая - есть три списка: <ul class="cl1"> <li></li> <li></li> </ul> <ul class="cl2"> <li></li> <li></li> </ul> <ul class="cl3"> <li></li> <li></li> </ul> Мне нужно,чтобы при наведении,например, на первый элемент любого списка менялся фон всех первых элементов других списков. Примерно так: при ul.cl1 li:nth-child(1) :hover {background:#000;} все элементы li:nth-child(1) других списков получили тот же background:#000; Элементов в списке у меня под 30... |
Gera Herbst,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.orange {
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('li').hover(function() {
$('li:nth-child('+($(this).index()+1)+') ').toggleClass('orange')
})
});
</script>
</head>
<body>
<ul class="cl1">
<li>1</li>
<li>2</li>
</ul>
<ul class="cl2">
<li>1</li>
<li>2</li>
</ul>
<ul class="cl3">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
|
Огромное спасибо!
Обязательно в следующий раз буду внимательнее к оформлению кода. |
| Часовой пояс GMT +3, время: 16:09. |