호버상에서 형제 div 수를 조정하십시오.

Question

하나의 Div 위에 마우스를 가져 가면 페이지에서 다른 div의 크기를 어떻게 수정할 수 있습니까?

내가 어떻게하는지 알아 내려고하는 최종 결과는 아래에서 매우 자세하게 설명합니다.

내가 같은

▀ ▀ ▀ ▀ 

▀ ▀ ▀ ▀ 

▀ ▀ ▀ ▀ 

내부 콘텐츠로 된 div의 페이지가 그리고 당신은 사업부 위에 마우스를 올려 때의 div의 변화 말할 수 있습니다 :

██▪▪▪ 

▪▪▪▪ 

▪▪▪▪ 

내가 기본적으로 그냥 궁금 무엇을 이것을 완료하는 가장 좋은 방법은, 누군가가 올바른 방향으로, 또는 이전 스레드로 나를 가리킬 수 있다면입니다.

감사합니다.

Answer 1

http://jsfiddle.net/daCrosby/2KrmD/가 나는 QUIC를 생성 k 데모는 입니다. 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'); 
    }); 
}); 

난 단지 너비를 조정 바이올린에서 :

은 여기의 핵심입니다. 당신이 높이를 조정하고 그들 모두가 멋지게 맞추어 지길 원한다면 나는 Masonry이라는 jQuery 플러그인을 조사 할 것입니다.

Answer 2

처음에는 평범한 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} 

Answer 3

일부 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 */ 
}); 

그리고이 얻을 :