Изменение фона div при наведении [Архив форума]

kefalia

26.04.2014, 20:55

Добрый вечер. Была задача: при наведении div-обертка и вложенный в него div должны были изменяться (обертка менять фон, а вложенный div - размер).

Сделала так:

$(document).ready(function(){
$('#usluga-1').hover(
function(){
$(this).css('background-image','url(/images/uslugi-pictures/uslugi-7-1.jpg)');
$('#usluga-1 #black-rect').css('-webkit-transform','scale(1.1)');
$('#usluga-1 #black-rect').css('-moz-transform','scale(1.1)');
$('#usluga-1 #black-rect').css('-o-transform','scale(1.1)');
},
function(){
$(this).css('background-image','url(/images/uslugi-pictures/uslugi-7.jpg)');
$('#usluga-1 #black-rect').css('-webkit-transform','');
$('#usluga-1 #black-rect').css('-moz-transform','');
$('#usluga-1 #black-rect').css('-o-transform','');
}
);
$('#usluga-2').hover(
function(){
$(this).css('background-image','url(/images/uslugi-pictures/uslugi-6-1.jpg)');
$('#usluga-2 #black-rect').css('-webkit-transform','scale(1.1)');
$('#usluga-2 #black-rect').css('-moz-transform','scale(1.1)');
$('#usluga-2 #black-rect').css('-o-transform','scale(1.1)');
},
function(){
$(this).css('background-image','/images/uslugi-pictures/uslugi-6.jpg)');
$('#usluga-2 #black-rect').css('-webkit-transform','');
$('#usluga-2 #black-rect').css('-moz-transform','');
$('#usluga-2 #black-rect').css('-o-transform','');
}
);

HTML

<div id="usluga-1">
<div id="black-rect">
<div>Текст</div>
</div>
</div>
<div id="usluga-2">
<div id="black-rect">
<div>Текст</div>
</div>
</div>

CSS

#black-rect{
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}

Все работает.

Вопрос: как можно сократить данный монструозный код, чтобы не стыдно было его отдать заказчику вместе с сайтом? :) Спасибо!

Vlasenko Fedor

26.04.2014, 21:48

чтобы не стыдно было его отдать заказчику
переписать все в CSS

alex.vv

26.04.2014, 22:06

переписать все в CSS
+1
Переходите на CSS и классы, а то получается забивание гвоздей микроскопом.

ruslan_mart

27.04.2014, 18:27

http://learn.javascript.ru/play/bHvCJ

<!DOCTYPE HTML>
<html>

<head>
<style>
.main {
background: #AAA;
height: 200px;
padding: 20px;
width: 200px;
}
.main-child {
background: #DDD;
border: 1px solid red;
height: 50px;
width: 50px;
}
.main:hover {
background: #BBB;
}
.main:hover .main-child {
transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
</style>
</head>

<body>
<div class="main">
<div class="main-child">Test</div>
</div>
</body>

</html>