Resize sibling divs on hover

Как изменить размер других разделов на странице при падении над одним Div?Resize sibling divs on hover

В конечном итоге я пытаюсь выяснить, как это сделать, очень грубо описано ниже.

Допустим, у меня есть страница дивы с содержанием внутри, таких как

▀ ▀ ▀ ▀ 

▀ ▀ ▀ ▀ 

▀ ▀ ▀ ▀

И при наведении курсора на DIV, изменение дивы в:

██▪▪▪ 

▪▪▪▪ 

▪▪▪▪

я в основном просто интересно, что лучший способ завершить это, если кто-то может указать мне в правильном направлении или на предыдущий поток.

Благодаря

источник

2013-07-17 Dennis Carney

Я не эксперт по JavaScript, но я подозреваю, что ваш вопрос не имеет ничего общего с Java и все связано с JavaScript. Если я прав, измените свой тег с Java на JavaScript. В противном случае вы будете путать гораздо больше таких людей, как я! –

Возможно, вы скомбинируете силу 'hover()' jQuery с 'animate()' или просто присваиваете/не присваиваете различные классы CSS при наведении. –

Вы пишете изменяете размер других разделов на странице при падении над одним Div. То, что я вижу тогда, это то, что все 'div' съели 100x100, но когда вы наведите курсор на один, все остальные станут, скажем, 10x10? Это то, чего ты хочешь? Или, вы имеете в виду, что все 10x10, а тот, который зависает, становится 100x100? –

Я создал стро k demo на . Это довольно легко сделать с jQuery и CSS. Я использовал переходы CSS3, но вместо этого вы могли бы легко использовать $.animate, если хотите больше совместимости.

Вот суть его:

$(document).ready(function(){ 
    $('.box').hover(function(){ 
     $(this).addClass('active'); 
     $('.box:not(.active)').addClass('shrink'); 
    }, function() { 
     $(this).removeClass('active'); 
     $('.box').removeClass('shrink'); 
    }); 
});

В скрипку я только регулировать ширину. Если вы хотите отрегулировать высоту и соединить их все хорошо, я бы посмотрел плагин jQuery под названием Masonry.

источник

2013-07-17 03:06:27

Отлично, спасибо за импровизированный отклик! Это и ответ DA - именно то, что я хотел выполнить. Благодаря! –

Моя первоначальная догадка была бы предложить вам использовать простой CSS.

Предполагая этот HTML:

<div id="content"><div></div><div></div>....</div>

Этот CSS может работать для вас:

#content>div { 
    display:inline-block; 
    width:16px; height:16px; 
    background:black; 
    vertical-align:middle; 
} 
#content {width:64px} 
#content:hover>div {width:8px;height:8px} 
#content>div:hover {width:24px;height:24px}

источник

2013-07-17 02:37:22

Должно быть довольно быстро с некоторыми JQuery.

Учитывая HTML:

<div id="content"> 
    <div></div> 
    <div></div> 
    [ ... ] 
</div>

И CSS

#content div{ 
    width:100px; 
    height:100px; 
    display:inline-block; 
    background:#444; 
    margin:10px 12px; 
} 
#content .small{ 
    width:70px; 
    height:70px; 
    margin:25px 27px; 
}

Используйте этот маленький кусочек JQuery:

$("#content div").hover(function(){ 
    $(this).siblings().addClass("small"); 
    $(this).removeClass("small"); 
    /* This can easily be straight JavaScript if your prefer */ 
});

И получить это: http://jsfiddle.net/daCrosby/2KrmD/

источник

2013-07-17 02:56:43 DACrosby

Спасибо DA, это довольно хорошее представление о том, что я ищу.Однако вы могли бы предложить способ «переустановить» другие блоки Div вокруг выделенного объекта? –

Resize sibling divs on hover

ответ

Смежные вопросы