Доброго времени суток друзья!
Очень нуждаюсь в вашей помощи!
Логика такова - необходимо чтобы при наведении на
Блок№2 срабатывал скрипт, который в свою очередь плавно менял картинку у
Блока №1. Сейчас этот скрипт работает соответственно только при наведении
на
Блок №1
СТРУКТУРУ рассмотрим на примере одного блока:
<div class="nav_blocks">
<div class="block">
<a href="#" class="l_block1"><span></span></a> //БЛОК №1
<div class="r_block"> //БЛОК №2
<p></p>
</div>
</div>
</div>
СТИЛИ:
.block {
width: 320px;
height: 140px;
float:left;
}
.block a{
height: 140px;
width: 50%;
}
.r_block {
float:right;
height: 140px;
width: 50%;
background: #01853F;
}
.r_block:hover {background: #505050;} \\ нужно сделать при наведении на него.
.l_block1 { \\изображение по умолчанию
display: inline-block;
position: relative;
text-indent: -9999px;
width: 160px;
height: 140px;
background: url(../img/sprite1.png) no-repeat;
}
.l_block1 span { \\изображение при наведении
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(../img/sprite1.png) no-repeat;
background-position: -160px 0;
}
JAVASCRIPT
$(function() {
$(".l_block1,.l_block2,.l_block3")
.find("span")
.hide()
.end()
.hover(function() {
$(this).find("span").stop().fadeIn();
}, function() {
$(this).find("span").stop().fadeOut();
});
});
Ребят я буду оч благодарен за любую помощь! peace!
Простой
Простой