Изменение одного блока относительно другого div блока при наведении мыши

[rostisslav]

есть вопрос. как сделать. пропорциональное изменение блоков допустим на 20px
Например

 

[01K]

Можно попробовать такой вариант:

$("#div1").hover(function () {
                $("#div1").addClass("divclass");
            }, function () {
                $("#div1").removeClass("divclass");
            });

html

<div id="div1" >
            HTML borders are best created with CSS.
</div>

Стиль

<style>
.divclass{width:200px;height:100px;border:1px solid blue;}
</style>

CSS3 решение:
Для просмотра ссылки Войди или Зарегистрируйся

 

[rostisslav]

тут проблема в том что Один стиль нужно увеличить,а второй уменьшить, при это сделать это сразу, чтоб не "рвало" дизайн сайта.

как пример смотрим тут

Для просмотра ссылки Войди или Зарегистрируйся

 

[Sirkukk]

Используйте такое Для просмотра ссылки Войди или Зарегистрируйся на jquery, подвести его под вашу задачу просто:

Спойлер

Поменяйте прямо на странице Для просмотра ссылки Войди или Зарегистрируйся . net/c2MDe/, нажмите RUN и смотрите что получится:
Html

<div id="ID"></div><div id="ID2"></div>

Скрипт

    var speed=500,
        originalWidth=100,
        hoverWidth=150;

    $('#ID').hover(function(){
        $(this).stop().animate({width:hoverWidth},speed);
        $('#ID2').stop().animate({width:200-hoverWidth},speed);
    },function(){
        $(this).stop().animate({width:originalWidth},speed);
        $('#ID2').stop().animate({width:originalWidth},speed);
    })

Стиль

#ID{
    width:100px;
    height:200px;
    border:1px solid #000;
    float:left;
}
#ID2{
    width:100px;
    height:200px;
    border:1px solid #000;
    float:left;
}

Transition CSS3 лучше не использовать, либо детектить браузер и только для "правильных" делать css3, остальным выдавать js.

 

[Prostobv]

Используйте такое Для просмотра ссылки Войди или Зарегистрируйся на jquery, подвести его под вашу задачу просто:

и как интересно это решение подвести под взаимное изменение двух процентно-изменяемых двух-трех блоков?

 

[Sirkukk]

Не совсем понял вопрос Для линейной структуры и для нескольких блоков из ID1 ... IDN берем нужный, его увеличиваем на M пикселей (процентов), остальные уменьшаем на M/N пикселей (если блоки одинаковые), или каждый блок уменьшаем на на одинаковый процент его ширины (чтобы сумма "уменьшений" была равна M). Все зависит от того, что должно меняться при увеличении параметров одного блока, параметры только соседнего, двух соседних или вообще всех зависимых блоков.

А если блоки в "три этажа" и связи вертикальные и горизонтальные, как на сайте Цептер, то нужно что-то другое...

 

[rostisslav]

Спасибо. Разобрался

Используйте такое Для просмотра ссылки Войди или Зарегистрируйся на jquery, подвести его под вашу задачу просто:

Спойлер

Поменяйте прямо на странице Для просмотра ссылки Войди или Зарегистрируйся . net/c2MDe/, нажмите RUN и смотрите что получится:
Html

<div id="ID"></div><div id="ID2"></div>

Скрипт

    var speed=500,
        originalWidth=100,
        hoverWidth=150;

    $('#ID').hover(function(){
        $(this).stop().animate({width:hoverWidth},speed);
        $('#ID2').stop().animate({width:200-hoverWidth},speed);
    },function(){
        $(this).stop().animate({width:originalWidth},speed);
        $('#ID2').stop().animate({width:originalWidth},speed);
    })

Стиль

#ID{
    width:100px;
    height:200px;
    border:1px solid #000;
    float:left;
}
#ID2{
    width:100px;
    height:200px;
    border:1px solid #000;
    float:left;
}

Transition CSS3 лучше не использовать, либо детектить браузер и только для "правильных" делать css3, остальным выдавать js.