Jquery懸停時增加div大小？

Question

如何增加懸停時的div大小？每個div都有相同的類名，它是動態創建的。我試過這段代碼：

<script type="text/javascript"> 
$('.resultitem').bind('mouseover', function() { 
    $(this).addClass('hovers'); 
    $('.resultitem').not('.hover').css({ opacity: 0.3 }); 
}); 
$('.resultitem').bind('mouseout', function() { 
    $('.resultitem').removeClass('hovers').fadeTo('normal',1); 
}); 
</script> 

<style type="text/css"> 
.hovers { 
    width:300px; 
    height:400px; 
} 
img.hovers { 
    width:300px; 
    height:300px; 
} 
</style> 

它改變其他div的對齊方式嗎？

Answer 1

使用CSS3 transform: scale(1.1)

.resultitem{ 
 
    width:150px; 
 
    height:150px; 
 
    background:#48e; 
 
    -webkit-transition: 0.5s; 
 
      transition: 0.5s; 
 
} 
 

 
.resultitem:hover{ 
 
    background:#59f; 
 
    -webkit-transform: scale(1.1); 
 
      transform: scale(1.1); 
 
}

<div id="parent"> 
 
    <img class="resultitem" /> 
 
    <img class="resultitem" /> 
 
    <img class="resultitem" /> 
 
    <img class="resultitem" /> 
 
    <img class="resultitem" /> 
 
    <img class="resultitem" /> 
 
</div>

Answer 2

有沒有你不使用純CSS理由嗎？

jsFiddle

.sizeMe { 
    width:300px; 
    height:300px; 
    background-color:#F00; 
    opacity:0.3; 
    /* use 'opacity 1s ease' for just opacity */ 
    -webkit-transition:all 1s ease; 
    -moz-transition:all 1s ease; 
    transition:all 1s ease; 
} 
.sizeMe:hover { 
    height:400px; 
    opacity:1; 
} 

Answer 3

使用CSS

add $(this).addClass('resize'); 

.resize:hover { 
    width:Xpx; 
    height:Ypx 
} 

Answer 4

試試這個 jQuery的

$("#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>