實現部分顯示在另一分區內自下而上一個div充分顯示在鼠標懸停

當你把鼠標懸停在「TUI獨家發售」四個圖像框，你得到的問題標題中描述的效果。

HTML：

<div class="maindiv"> 
<img src="img/img.jpg" /> 


<div class="lower_div"> 

this is the lower div1<br> 
this is the lower div2<br> 
this is the lower div3<br> 
this is the lower div4<br> 
this is the lower div5<br> 
this is the lower div6<br> 
</div> 
</div>

使lower_div的方式坐在底部使其位置absolute和bottom 0。但無論什麼原因，在我的大HTML頁面，這種技術不起作用，雖然它在另一個只包含這個片段的HTML頁面中工作。

所以我正在尋找另一種方式使div坐在底部。除此之外，我還需要讓它在mousehover上完全顯示出來。

如何實現這些？

來源

2012-08-15 Istiaque Ahmed

定義「不工作」是什麼呢？ – Onheiron 2012-08-15 09:27:31

lower_div只是下降到頁面的底部.. – 2012-08-15 09:28:14

你有沒有試圖在main_div和lower_div上設置相對位置？ – Stano 2012-08-15 09:30:25

這裏是一個工作演示：當jQuery的參與http://jsfiddle.net/qbyeC/

的JavaScript是簡單的。你所要做的就是爲每個maindiv定義mouseenter和mouseleave。

$('.maindiv').on({ 
    mouseenter : function(e){ 
     $(this).children('.lowerdiv').stop(true,false);      
     $(this).children('.lowerdiv').animate({top:0,marginTop:0}); 
    }, 
    mouseleave : function(e){ 
     $(this).children('.lowerdiv').stop(true,false); 
     $(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'}); 
    } 
});

這將檢查lowerdiv類並將其動畫到每個事件的正確位置。注意：mouseleave第二行的marginTop應該與lowerdiv類的margin-top css屬性相匹配。這是您希望div在鼠標不在元素上時伸出的量。

的CSS應該進行修改，以自己的喜好，但這些是重要的部分：

.maindiv { 
    overflow:hidden; 
    position:relative; 
} 
.lowerdiv { 
    position:absolute; 
    width:100%; 
    bottom:0px; 
    top:100%; 
    margin-top:-40px; 
}

的HTML代碼是你如何把它除非我改變lowerdiv到lowerdiv匹配maindiv。

來源

2012-08-15 09:36:51

你需要一個負位置（因爲他們這樣做，是TUI頁），開始像

position:absolute; 
bottom:-20px;

，並嘗試周圍，直到它適合。使用jQuery

，那麼你可以這樣做：

$('.maindiv').hover(
    function() { 
    $(this).find('.lower_div').stop(true, false).animate({'bottom':0}); 
    }, 
    function() { 
    $(this).find('.lower_div').stop(true, false).animate({'bottom':-20}); 
    } 
);

http://api.jquery.com/hover/

當然這種方式，你總是有，而你試圖改變你的CSS原來的位置（-20）和JS找到最佳的起始位置。通過在動畫開始之前存儲original_position，您可以更優雅地做到這一點，但是這可能會在這裏？我是比較新的stackoverflow

來源

2012-08-15 09:37:31 m7o

有一點建議可以在每次動畫之前調用'$（this）.find（'。lower_div'）。stop（true，false）'。如果先前的動畫未完成，這將確保動畫在其軌道上停止，以便在事件觸發時立即開始新的動畫。 – 2012-08-15 09:45:48

感謝您的建議 - 我添加了。 – m7o 2012-08-15 09:49:19

可能這會幫助你。

SCRIPT

$(function(){ 
    $(".maindiv").hover(function(){ 
     $(this).children('.lowerdiv').stop().animate({top:0}) 
    },function() { 
      $(this).children('.lowerdiv').stop()..animate({top:150}) 
     }) 
})

HTML

<div class="maindiv"> 
    Main div content 
    <div class="lowerdiv"> 
     lowediv content 
    </div> 
</div> 
<div class="maindiv"> 
    Main div content 
    <div class="lowerdiv"> 
     lowediv content 
    </div> 
</div>

CSS

.maindiv{ 
    height:200px; 
    width:200px; 
    background:#CCC; 
    position:relative; 
    overflow:hidden; 
    float:left; 
    margin:10px; 
} 
.lowerdiv{ 
    height:200px; 
    width:200px; 
    background:#797987; 
    position:absolute; 
    top:150px; 
}

的jsfiddle - http://jsfiddle.net/tRYTq/4/

來源

2012-08-15 09:51:35 Abhishek

實現部分顯示在另一分區內自下而上一個div充分顯示在鼠標懸停

回答

相關問題