Изменение фона div при наведении
Добрый вечер. Была задача: при наведении 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;
}
Все работает. Вопрос: как можно сократить данный монструозный код, чтобы не стыдно было его отдать заказчику вместе с сайтом? :) Спасибо! |
Цитата:
|
Цитата:
Переходите на CSS и классы, а то получается забивание гвоздей микроскопом. |
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>
|
| Часовой пояс GMT +3, время: 03:08. |