[kefalia]

Добрый вечер. Была задача: при наведении 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;
}

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

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