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

Question

[Павел Инки]

Привет всем.
Я вопрос этот уже задавал, но немного не точно... не подумал что будут играть роль вложенности.
Как сделать что бы при наведении на ссылку внутри дивов (подпункт списка li) item1_2 менялся допусти 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>

предыдущий вопрос с некоторыми полезными решениями, которые мне советовали люди - toster.ru/q/146735

Comments

[Alexander Sydorenko]

Обозначьте пожалуйста теми же классами, как маркерами, что у Вас item1_2, что у вас Брат в рамках дива одного ли, и т.д. то есть куда ткнуть, и что бы что светилось? И еще вопрос.. Почему не пользуетесь вложенными списками для навигации, имхо ваш ul > li > div.category не что иное как ul > li > ul.category и более логично получится, и более семантически..

Answer 1

[Павел Инки]

Я вот сделал так,

$(function (){
	$('.item').hover(
		function () {
			$(this.parentNode).find('.category a').css('background','url(/image/ico-catalog-bgr.png) repeat-x');
		},
		function () {
			$(this.parentNode).find('.category a').css('background','');
			
		}
	);
});

Comments

[askhat]

Это антипаттерн

Answer 2

[teotlu]

Вы уж либо пишите всё на нативном js, либо на jQuery, зачем перемешивать $ и querySelectorAll?
Про проход по элементам в цикле в такой задаче я вообще молчу.
Попробуйте так:

var $links = $('.category a');

$links.on('mouseover', function(){
  $(this).closest('.category').find($links).css('background','url(/image/ico-catalog-bgr.png) repeat-x');
});

$links.on('mouseout', function(){
  $(this).closest('.category').find($links).css('background','');
});

Comments

[Павел Инки]

Ваша критика абсолютно справедлива. И вы наверно правы, что нечего смешивать методы.
Но я вообще нуляк в JS, вот вы говорите об отличии JS и jQuery, а я его вообще не знаю - только только начинаю изучать. Спасибо за ответ.

[Alex]

Павел Инки: оффтопик: лучше сначала изучать JS без jQuery.

[teotlu]

Павел Инки: isqua прав. Я вот изучил вначале jQuery, и сейчас даже жалею об этом. Хотя со временем разница в порядке изучения стала для меня незаметной.

JS лучше изучить вначале потому, что jQuery расхолаживает. В нём слишком легко делать сложные вещи. Причём новички часто делают их неправильно, просто не понимая половины того, что делают. И оно кое-как, криво, но работает, а они радуются и продолжают делать всё более неправильно, и... в общем, примерно так появляются быдлокодеры :)

Самый банальный пример — это выборка элементов по селектору. Есть у нас некий код, который делает много разных действий, например, со всеми ссылками, находящимися внутри списков. И человек пишет:

$('ul a').hide();
$('ul a').css({...});
$('ul a').show();

А это, по сути, означает, что jQuery аж три раза проходит по всему документу и находит нам эти ссылки в списках. Понимающий это программист сразу бы сохранил выборку элемента в переменную, и уже над ней производил действия (а хорошо понимающий программист ещё и сделал бы выборку по id или классу, а не по имени тега):

var $links = $('ul a');
$links.hide();
$links.css({...});
$links.show();

И код выглядит нагляднее, и работает быстрее, и поддерживать проще (например, если у нас ссылки внезапно поменялись на span).

И таких тонких моментов достаточно много. А при изучении JS человек с куда большей вероятностью начнёт всё это понимать на раннем этапе.