懸停時增加尺寸而不更改其他元素的位置

Question

假設我的10 divs的形式爲squares。我們稱之爲home頁面。 在這些10， 3 divs具有類.event1 5 divs具有類.event2 2 divs具有類.event3

<div class="boxes event1"> 
    ....//3-times 
    ....     
</div> 
<div class="boxes event2"> 
    ....//5-times 
    ....     
</div> 
<div class="boxes event3"> 
    ....//2-times 
    ....     
</div> 

這些箱子被放在旁邊彼此。

當我點擊event1時，除了那些擁有類event1的盒子外，所有的盒子都會淡出。同樣，對於所有類。在點擊home，所有的箱子將再次淡入

<div id="navi"> 
    <a href="#"><div id="t0"><span>Home</span></div></a> 
    <a href="#"><span>Event1</span></a> 
    <a href="#"><span>Event2</span></a> 
    <a href="#"><span>Event3</span></a> 
</div> 

爲fadeOut我的jQuery代碼：

<script type="text/javascript"> 
    $(function() { 
     $('#t0').click(function() { 
      $("*").animate({ 
       opacity: 1.0 
       }, 500); 
     }); 
     $("#navi a").click(function() { 
      c = $(this).text().toLowerCase(); 
      if (c!="home"){ 
       $('.' + c).animate({ 
        opacity: 1.0 
       }, 500).addClass('w1'); 
       $('.boxes').not('.' + c).animate({ 
        opacity: 0.0 
       }, 500); 
      } 
     }); 
    }); 
</script> 

的CSS類：

.boxes, .event1, .event2, .event3 { 
    background:rgba(0, 0, 0, .30); 
    float:left; 
    position:relative; 
    overflow:hidden; 
    width:100px; 
    height:100px; 
    margin:2px; 
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
} 


    .w1:hover{ 
     background:rgba(0, 0, 0, .30); 
     float:left; 
     width:200px; 
     height:200px; 
     position:absolute; 
     overflow:hidden; 
     box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
     -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
     -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
    } 

現在，我想使只有一個特定框大小增加（width:200px; height:200px ），當鼠標指針懸停。我找不到辦法做到這一點。

當我添加該類.w1在javascript代碼，它被應用到所有具有類event1或event2或event3（無論哪個被選擇的一個）的元件。所以，當我徘徊到某個特定的課堂（已選中）時，所有的框都會進行過渡，並且框會發生變化。

我只想要一個盒子來改變尺寸，而其他盒子都在原來的位置。 此外，必須爲特定事件激活此hovering事件，以便在選擇home時不能在元素上使用hover。我甚至試圖通過更改z-index來做到這一點，但頁面變得相當混亂。

Answer 1

我覺得自由地重新構建項目。在這個例子中，我使用javascript來代替css。這個例子的要點是，我不調整現有的框。我建立一個新的div，複製舊div的內容，它的位置絕對和舊的不透明度設置爲0的jsfiddle鏈接：http://jsfiddle.net/56yeQ/8/

HTML：

 <div id="navi"> 
     <a href="#"><div id="t0"><span>Home</span></div></a> 
     <a href="#"><span>Event1</span></a> 
     <a href="#"><span>Event2</span></a> 
     <a href="#"><span>Event3</span></a> 
    </div> 
    <div class="boxes event1"> 
     1 
    </div> 
    <div class="boxes event1"> 
     2 
    </div> 
    <div class="boxes event1"> 
     3 
    </div> 
    <div class="boxes event2"> 
     4 
    </div> 
    <div class="boxes event2"> 
     5 
    </div> 
    <div class="boxes event2"> 
     6 
    </div> 
    <div class="boxes event2"> 
     7 
    </div> 
    <div class="boxes event2"> 
     8 
    </div> 
    <div class="boxes event3"> 
     9 
    </div> 
    <div class="boxes event3"> 
     10 
    </div> 

CSS：

 .boxes, .event1, .event2, .event3 { 
      background:rgba(0, 0, 0, .30); 
      float:left; 
      position:relative; 
      overflow:hidden; 
      width:100px; 
      height:100px; 
      margin:2px; 
      box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
     } 

     .w1{ 
      background:rgba(0, 0, 0, .30); 
      float:left; 
      width:100px; 
      height:100px; 
      position:absolute; 
      overflow:hidden; 
      margin: 2px; 
      box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      opacity: 1; 
     } 

的javascript：

 var isHome = true; 

     $(function() { 

      $("#navi a").click(function() { 
       c = $(this).text().toLowerCase(); 
       isHome = c=="home"; 
       if (isHome){ 
        $("*").animate({ 
         opacity: 1.0 
        }, 500); 
       } else { 
        $('.boxes').not('.' + c).animate({ 
         opacity: 0.0 
        }, 500); 
        $('.' + c).animate({ 
         opacity: 1.0 
        }, 500) 
       } 
      }); 
     }); 

     function hoverIn(element){ 

      if(!isHome && $(this).css("opacity")==1){ 
       $(".w1").each(function(i){ 
        var oldDiv= $(this).data("oldDiv"); 
        $(oldDiv).css({opacity:1}); 
        $(this).remove(); 
       }); 
       var posX = $(this).position().left+2; 
       var posY = $(this).position().top+2; 
       var newDiv = $("<div>").html($(this).html()); 
       $(newDiv).mouseleave(hoverOut); 
       $(newDiv).addClass("w1"); 
       $("body").append(newDiv); 
       $(this).css({opacity: 0}); 
       $(newDiv).offset({top:posY, left: posX}); 
       $(newDiv).data("oldDiv",this); 
       $(newDiv).animate({height:"200px",width:"200px"},500); 
      } 
     } 

     function hoverOut(element){ 

      var oldDiv= $(this).data("oldDiv"); 
      $(oldDiv).css({opacity:1}); 

      $(this).remove(); 
     } 

     $(".boxes").mouseenter(hoverIn); 

Answer 2

也許這是你在找什麼：

 .w1:hover{ 
      <!--Removed the position absolute--> 
      background:rgba(0, 0, 0, .30); 
      float:left; 
      width:200px; 
      height:200px; 
      overflow:hidden; 
      box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset; 
      margin-bottom: -100px; 
     } 
     .w1:hover +div{ 
      margin-left: -100px; 
     }