Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.11.2014, 15:05
Новичок на форуме
Отправить личное сообщение для InkyThousand Посмотреть профиль Найти все сообщения от InkyThousand
 
Регистрация: 11.11.2014
Сообщений: 8

Как изменить 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','')
	;}
}
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2014, 15:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от InkyThousand
Как сделать, что бы при наведении на ссылку внутри дивов (подпункт списка li) item менялся допусти background ссылки в диве category, но только именно "брата" - т.е. в рамках одного li?
Переведи... (с)
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2014, 15:21
Новичок на форуме
Отправить личное сообщение для InkyThousand Посмотреть профиль Найти все сообщения от InkyThousand
 
Регистрация: 11.11.2014
Сообщений: 8

Ну это меню: каждая группа div'ов (category и item) меню является пунктами, но вот category это что то аля Категория товаров, а нижеидущие item это подкатегории.
Так вот когда наводишь (hover) на один из item нужно что бы менялся css (background для примера) category.
Проблема в том что тут нет родителей и дочерних. они как бы равные, и завернуты в li
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2014, 15:43
Кандидат Javascript-наук
Отправить личное сообщение для vuler Посмотреть профиль Найти все сообщения от vuler
 
Регистрация: 16.02.2012
Сообщений: 109

Тут вроде все элементарно.
$(this).closest('li').find('.category a').css('background','');
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2014, 15:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 11.11.2014, 16:01
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

InkyThousand, видимо у тебя структура неправильно выстроена. Иначе можно было бы через css все сделать.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 11.11.2014, 16:34
Новичок на форуме
Отправить личное сообщение для InkyThousand Посмотреть профиль Найти все сообщения от InkyThousand
 
Регистрация: 11.11.2014
Сообщений: 8

Сообщение от danik.js Посмотреть сообщение
InkyThousand, видимо у тебя структура неправильно выстроена. Иначе можно было бы через css все сделать.
Да вы правы, со структурой тут запутанно и реально если бы все ок было то css тут помогло бы. Но уже поздно менять javascript'om решилось.
Ответить с цитированием
  #8 (permalink)  
Старый 11.11.2014, 16:35
Новичок на форуме
Отправить личное сообщение для InkyThousand Посмотреть профиль Найти все сообщения от InkyThousand
 
Регистрация: 11.11.2014
Сообщений: 8

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Div при наведении перекрывает меню tart Общие вопросы Javascript 3 18.11.2014 13:40
замена CSS при наведении на div DDD777 AJAX и COMET 1 25.09.2014 15:24
resize содержимого div при его вырезании в другой div yriiarutiunian Общие вопросы Javascript 5 06.06.2014 08:54
Как реализовать задержку при наведении в меню? Stas-ik Элементы интерфейса 14 20.02.2014 12:21
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31