我知道如何通過爲父母做position:absolute
和爲孩子做position:relative
來在divs頂部上疊加div,但是我怎樣才能讓div從另一個div上升?我想要達到的一個例子是here。滾動到底部並將鼠標懸停在作品上。如何讓div從其他div上升?
0
A
回答
1
的HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery的
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
的jsfiddle:http://jsfiddle.net/Z6eLa/2/
+0
你達人......謝謝! – jas7457 2013-02-28 04:32:50
0
向jQuery和z-index介紹自己。
http://api.jquery.com/slideDown/
訣竅這裏了slideDown會讓你的頂格滑下。唯一出現在我腦海的是,而不是擴大底部股票,相反。獲取頂部div,並使其滑動,而其他div顯示在其後面。它應該給出底部div'滑動'的外觀。
請注意,對不起,如果這不起作用。我其實不確定你是否可以讓它滑到一半而不是所有的方式......但祝你好運!
2
你可以做什麼是絕對的立場,即彈出一個相對定位的盒子,例如:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
現在,你有,你會希望標題看不見的,除非在滾動。所以,一個簡單的辦法只有CSS來做到這一點:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
最後一行使得人們看到,當你將鼠標懸停在圖片。
然後,您可以輕鬆地使用jQuery爲其製作動畫。這似乎是他們正在使用的。
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
+0
順便說一下,爲了使CSS在jQuery中表現出色,你應該在
0
相關問題
- 1. 如何讓下來的div上沿其他div
- 2. 如何將div放在其他div上
- 3. DIV懸停讓其他DIV移動
- 4. 不能讓div離開其他div
- 5. 如何讓一個div重疊其他
- 6. 如何填寫其他div的div?
- 7. CSS - 在其他div上浮動子div
- 8. Div正在趕上其他div
- 9. 無法在其他div上放置div
- 10. 如何在其他div上製作獨立的div?
- 11. DIV不留其他DIV
- 12. PHP展示Div其他Div
- 13. 讓其他兩個div的高度爲
- 14. CSS Div覆蓋其中的其他div
- 15. 如何讓DIV
- 16. 如何讓頁腳DIV啓動所有其他的div完成後
- 17. 使用slideToggle時,如何讓所有其他div滑回來?
- 18. 如何讓兩個Div相對於其他的固定?
- 19. 如何讓css影響同一容器中的其他div
- 20. 如何不讓其他div重疊我的導航欄
- 21. 如何讓我的html div與其他元素同步調整
- 22. HTML - 如何讓一個div可滾動,其他靜態?
- 23. 我如何讓底部的其他內容的div溢出?
- 24. 如何在其他div被佔用時影響其他div屬性?
- 25. 如果其他div被卷出,如何淡入div
- 26. 如何讓DIV佔用容器div的其餘高度?
- 27. 加載其他Div後淡入Div
- 28. CSS定位 - rezising div到其他div
- 29. 阻止DIV與其他DIV重疊(CSS)
- 30. div的高度分別爲其他DIV
你有沒有試過z-index。? – 2013-02-28 04:11:56