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

Question

[Павел Инки]

Привет всем
подскажите пожалуйста,
как сделать что бы при наведении на ссылку внутри дива nonsun менялся допусти background ссылки в диве daddy?

<div class="daddy"><a>need-url</a></div>
<div class="notsun"><a>url</a></div>

какое-то есть решение на js или css ?

Answer 1

[A K]

Решение онли js
jsfiddle.net/Symphony/7Lzg5s31

Решение онли css
jsfiddle.net/Symphony/7Lzg5s31/1

Comments

[Павел Инки]

Отличные решения! все работает, и понятно... Но вот если div'ов с ссылками становиться много, т.е. Меню например, то стили меняются у всех, а нужно что бы только у соседних.

[A K]

jsfiddle.net/Symphony/7Lzg5s31/2 - чистый js для меню по вашей структуре
jsfiddle.net/Symphony/7Lzg5s31/3 - чистый css

[Павел Инки]

Symphony: Супер! Спасибо.

[Павел Инки]

А вот если class="notsun" много под daddy? Что делать?

<li>
<div class="daddy"><a href="#d">need-url</a></div>
<div class="notsun"><a href="#d">url</a></div>
<div class="notsun"><a href="#d">url</a></div>
<div class="notsun"><a href="#d">url</a></div>
</li>
<li>
<div class="daddy"><a href="#d">need-url</a></div>
<div class="notsun"><a href="#d">url</a></div>
<div class="notsun"><a href="#d">url</a></div>
</li>

[A K]

Павел Инки: js

Answer 2

[Ярослав Сербин]

$('.notsun a').on('mouseover', function() {
    $('.daddy a').css('color','red');
});

Answer 3

[Alexander Mischuk]

Выше правильно сказали, но только хорошим тоном считается стили выносить всё же в таблицу стилей, а в скриптах добавлять и убирать класс при наведении.

$(".notsun a").hover(function () {
    $('.daddy a').toggleClass("hovered");
 });

Comments

[Anton Filippov]

Кстати, а как *эффективнее*, через hover() или хэндлер?

[Павел Инки]

Вы правы, очень хорошо что бы стили сохранялись только тогда когда курсор наведен.

[Grizar]

Alexander Mischuk Alexander Mischuk , да это работает.
но подскажите.
у меня меняются стили во всех блоках, а как делать это только в том в котором есть наведение курсора.?

Answer 4

[Alexander Kaloshin]

$('.notsun a').on('mouseover', function(){
  $('.daddy a').css('background-color','red');
})

как то так.. насчет селектора могу ошибаться, так что лучше проверить в документации jQuery.

Comments

[Павел Инки]

Спасибо, Решение работает, но вот стили записываются в таблицу, и после того как курсор отвести, стиль сохраняется, а нужно что бы он был только при активном hover.

[Alexander Kaloshin]

$('.notsun a').on('mouseover', function(){
$('.daddy a').css('background-color','red');
}).on('mouseleave', function() {
$('.daddy a').css('background-color','blue');
})

так наверное

[Павел Инки]

Alexander Kaloshin: Спасибо. Но вот я понял, что я неправильно описал вопрос - у меня таких пар много - т.е. это меню - каждая пара дива закрыта в

<li>
<div class="daddy"><a>need-url1</a></div>
<div class="notsun"><a>url1</a></div>
</li>
<li>
<div class="daddy"><a>need-url2</a></div>
<div class="notsun"><a>url2</a></div>
</li>

Мне посоветовали использовать prev(), но как его подвязать к Вашим методам не пойму.

[Alexander Kaloshin]

попробуйте вариант с .each

$('.notsun a').on('mouseover', function(){
$('.daddy a').each(function(item){
$(item).css('background-color','red');
})
}).on('mouseleave', function() {
$('.daddy a').each(function(item){
$(item).css('background-color','blue');
});
})

пишу не проверяя - главное мысль донести :)

Answer 5

[Bohdan Shtepan]

На CSS как два пальца...впрочем, вот так:

.notsun:hover + .daddy a
{
   //custom css rules
}

Comments

[Alexander Mischuk]

Разметка другая, ничего?

Answer 6

[Павел Инки]

Alexander Kaloshin: Спасибо. Но вот я понял, что я неправильно описал вопрос - у меня таких пар много - т.е. это меню - каждая пара дива закрыта в

<li>
<div class="daddy"><a>need-url1</a></div>
<div class="notsun"><a>url1</a></div>
</li>
<li>
<div class="daddy"><a>need-url2</a></div>
<div class="notsun"><a>url2</a></div>
</li>

Мне посоветовали использовать prev(), но как его подвязать к Вашим методам не пойму.

Answer 7

[Frank777]

При наведении на .notsun a к .daddy a добавится класс active который описывай как хочешь. На этом сайте слева под логотипом есть карта функций. Очень удобная штука для начинающих.

$(document).ready(function(){
	$('li').each(function(){
		$('.notsun a').on('mouseover', function() {
			$('.daddy a').toggleClass('active');
		});
	});
});

Это более продвинутое решение но его надо окультурить под себя

$(document).ready(function(){
	$('body').on('mouseover', '.notsun a ', function(e){
		e.preventDefault();
		$(this).closest('li').find('.daddy a').toggleClass('active');
	});
});