Форум

InkyThousand · #1 (**permalink**) 11.11.2014, 15:05

Привет всем, подскажите пожалуйста
Как сделать, что бы при наведении на ссылку внутри дивов (подпункт списка 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','')
	;}
}

ksa · #2 (**permalink**) 11.11.2014, 15:17

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

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

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

InkyThousand · #3 (**permalink**) 11.11.2014, 15:21

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

vuler · #4 (**permalink**) 11.11.2014, 15:43

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

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

ksa · #5 (**permalink**) 11.11.2014, 15:58

Сообщение от 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>

danik.js · #6 (**permalink**) 11.11.2014, 16:01

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

InkyThousand · #7 (**permalink**) 11.11.2014, 16:34

Сообщение от danik.js

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

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

InkyThousand · #8 (**permalink**) 11.11.2014, 16:35

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

Форум

Справочник

Discord чат

Курсы javascript