CSS + jQuery的，爲了實現這一重疊

我有3名家長，將包含未定義的兒童人數，（父母浮動）的孩子都是相對的，該計劃是這樣的：

-----Parent----- ------Parent------ ----Parent---- 
| Child  | |  Child  | | Child | 
| Child  | |  Child  | | Child | 
| Child  | |  Child  | | Child | 
| Child  | |  Child  | -------------- 
---------------- -------------------

鼠標懸停後，孩子會調整到更大的高度，但我希望它們重疊，我不想延長父母。

我的CSS是這樣的：

.parent{ 
    position:relative; 
    float:left; 
    width:296px; 
    background-color:pink; 
    margin-right:10px; 
} 

    .child{ 
     position:relative; 
     height:60px; 
     margin-bottom:10px; 
     background-image:url("../images/theme_test.png"); 
    }

我試圖用最高的Y位置，但它不工作，孩子吼叫會下降。

來源

2013-06-29 Mihai Alin

請創建一個包含你的CSS和HTML的jsfiddle標記 –

http://jsfiddle.net/2bU5D/ –

你去那裏：jsFiddle。

我已經更新使用margin S和通知兩件事的立場：

我不得不改變z-index所以懸停元素將在最前面
我已經創建了一個特殊處理的最後一個孩子 - 使它成長起來，而不是向下的，所以它不會讓父母不再

這是mouseenter事件：

$('.child').mouseenter(function() { 
     $(this).css('z-index',5); 
     if($(this).is(':last-child')){ // check if this is the last child 
      $(this).animate({ 
       height: "80px", 
       'margin-top': "-20px" // grow upwards.. 
      }, 250); 
     }else{ 
      $(this).animate({ 
       height: "80px", 
       'margin-bottom': "-10px" // grow down wards.. 
      }, 250); 
     } 
    })

mouseout正好相反。

來源

2013-06-29 21:25:10

請不要完全依賴到第三方網站的鏈接，即使是與jsFiddle一樣可靠的鏈接。最好在這裏發佈代碼並使用小提琴作爲支持。 –

更新 - 增加了mouseenter事件和一些註釋來解釋 –

我在過去做過類似的事情。你並不需要任何的JavaScript或jQuery。

你需要的是設置每個孩子的相對位置（你已經完成），並在每個孩子的內部創建另一個具有絕對位置的容器。然後，只需添加一些css代碼來更改懸停時此容器的高度，並適當調整z-index。

更新： 我已經更新過您的代碼。只是使用最後一個孩子的CSS來移動最後一個孩子，而不是隻增加高度。結果與使用JavaScript相同，但我個人會避免在不需要時使用JS。

這裏更新jsFiddle（由過渡和邊境 - 看起來不錯:)）

CSS：

.parent{ 
    position:relative; 
    float:left; 
    width:100px; 
    background-color:pink; 
    margin-right:10px; 
} 
.child{ 
    position:relative; 
    height: 60px; 
    margin-bottom:10px; 
} 
.child > .content { 
    position: absolute; 
    width: 100%; 
    height: 60px; 
    background-color:cyan; 
    z-index: 1; 
} 

.child:hover > .content { 
    background: red; 
    height: 100px; 
    z-index: 2; 
} 

.child:last-child:hover > .content { 
    height: 100px; 
    bottom: 0px; 
}

HTML：

<div class="parent"> 
    <div class="child"> 
     <div class="content"></div> 
    </div> 
    <div class="child"> 
     <div class="content"></div> 
    </div> 
    <div class="child"> 
     <div class="content"></div> 
    </div> 
</div> 
<div class="parent"> 
    <div class="child"> 
     <div class="content"></div> 
    </div> 
    <div class="child"> 
     <div class="content"></div> 
    </div> 
    <div class="child"> 
     <div class="content"></div> 
    </div> 
</div>

來源

2013-06-29 21:27:15 Majky

家長仍然在懸停在較低的孩子上變得更大.. –

不，它不是。嘗試將邊框添加到父類，並看到沒有任何事情發生。這是正確的。 – Majky

對不起，我的意思是孩子超過父母的大小..我認爲他希望孩子留在家長 –

我編輯Yotam的撥弄通過實施一對夫婦if聲明，以防止改變父母的身高（如果你快速移動到另一個身上，他會這樣做），並防止孩子如果鼠標從一個快速移動到另一個，有時候會反覆進行動畫。這是通過檢查列中的另一個孩子是否正在進行動畫並且在完成之前不允許動畫來完成的：if(!animating)。唯一的問題是如果一個人很快從一個移動到另一個，所以mouseenter發生在另一個停止動畫之前。你可以更好地決定你更喜歡哪一個。 Here is the jsFiddle

使用CSS像Majky說將是真棒將是真棒，這是我會怎麼做呢親自

來源

2013-06-29 21:45:20

CSS + jQuery的，爲了實現這一重疊

回答

相關問題