Javascript-форум - Как изменить css одного div при наведении на другой с javascript?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как изменить css одного div при наведении на другой с javascript? (https://javascript.ru/forum/misc/51567-kak-izmenit-css-odnogo-div-pri-navedenii-na-drugojj-s-javascript.html)

Как изменить css одного div при наведении на другой с javascript?

Привет всем, подскажите пожалуйста
Как сделать, что бы при наведении на ссылку внутри дивов (подпункт списка li) item менялся допусти background ссылки в диве category, но только именно "брата" - т.е. в рамках одного li?

<ul>
<li>
<div class="category"><a>need-url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
</li>
<li>
<div class="category"><a>need-url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
</li>
</ul>

Я вот сделал так, но меняются стили у всех div'ов с классом category, а как сделать что бы менялся только тот который находится в одном li - ну как бы заголовок Блока ссылок

var elm_list = document.querySelectorAll('.item a');
for(var i=0; i<elm_list.length; i++) {
    elm_list[i].onmouseover = function() {
	$('.category a').css('background','url(/image/ico-catalog-bgr.png) repeat-x')
	;}
    elm_list[i].onmouseout = function() {
	$('.category a').css('background','')
	;}
}

Цитата:

Сообщение от InkyThousand

Как сделать, что бы при наведении на ссылку внутри дивов (подпункт списка li) item менялся допусти background ссылки в диве category, но только именно "брата" - т.е. в рамках одного li?

Переведи... (с) :blink:

Ну это меню: каждая группа div'ов (category и item) меню является пунктами, но вот category это что то аля Категория товаров, а нижеидущие item это подкатегории.
Так вот когда наводишь (hover) на один из item нужно что бы менялся css (background для примера) category.
Проблема в том что тут нет родителей и дочерних. они как бы равные, и завернуты в li

Тут вроде все элементарно.

$(this).closest('li').find('.category a').css('background','');

Цитата:

Сообщение от InkyThousand

Так вот когда наводишь (hover) на один из item нужно что бы менялся css (background для примера) category.

Так челе?

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.on {
	background-color: red;
}
.sel {
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function (){
	$('.item').hover(
		function () {
			$(this).addClass('sel');
			$(this.parentNode).find('.category').addClass('on');
		},
		function () {
			$(this).removeClass('sel');
			$(this.parentNode).find('.category').removeClass('on');
		}
	);
});
</script>
</head>
<body> 
<ul>
<li>
	<div class="category"><a>need-url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
</li>
<li>
	<div class="category"><a>need-url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
    <div class="item"><a>url</a></div>
</li>
</ul>

</body>
</html>

InkyThousand, видимо у тебя структура неправильно выстроена. Иначе можно было бы через css все сделать.

Цитата:

Сообщение от danik.js (Сообщение 340461)

InkyThousand, видимо у тебя структура неправильно выстроена. Иначе можно было бы через css все сделать.

Да вы правы, со структурой тут запутанно и реально если бы все ок было то css тут помогло бы. Но уже поздно менять javascript'om решилось.:)

Это то что нужно! Спасибо огромное, ksa!
Это все у меня из-за незнания и неопытности JS