如何使用html5完成懸停效果展示，而不是adobe flash

我有一個網頁，當您將光標懸停在底部時，需要顯示滑動面板。如何使用html5完成懸停效果展示，而不是adobe flash

這是之前。

mockup

這是後

mockup

最接近的效果是我見過的https://read.amazon.com，當你閱讀電子書和頂部和底部的控制出現當你的光標足夠接近時。

如果我把這個問題放在錯誤的stackexchange中，我很抱歉。

UPDATE：

讓我解釋一下，即使屏幕滾動垂直，底部向上滑動元素應始終出現在屏幕的底部，所以我想，這不僅僅是使用jQuery更多。徘徊。

另一個更新：

我也想補充一點，當光標懸停足夠接近，但不是元素本身，元素被觸發向上滑動。

來源

2012-12-11 Kim Stacks

最終的答案是http://jsfiddle.net/ BXGG5/6/ –

1.爲了得到懸停效果：

你可以考慮使用JavaScript，更具體jQuery .hover()

HTML：

<p>A bunch of text here ...</p> 
<div id="toHover"> 
    <div id="toShowOnHover">This is something to show</div> 
</div>

JS：

$("#toHover").hover(
    function() { $("#toShowOnHover").show(); }, 
    function() { $("#toShowOnHover").hide(); } 
);

2。爲了保持DIV底部：

CSS：

#toHover {position: fixed; bottom: 0px; left: 0px; width: 100%; height: 40px; } 
#toShowOnHover {background-color:red; height: 40px; }

時退房JS Fiddle，看看它是否是你心目中

來源

2012-12-11 07:12:18 ToddBFisher

對不起，讓我補充說，頁面可以垂直滾動，但toShowOnHover始終是屏幕的底部。我已經編輯了相應的問題。 –

可以通過在'toHover' div中設置CSS'position'選項來調整，就像Sam建議的那樣。 – ToddBFisher

謝謝，我已經試過了Sam的jsfiddle。我需要幻燈片出現之前，我甚至徘徊在div的頂部。所以我想知道是否有辦法做到這一點。這是否需要在底部元素上方使用另一個無形的div？ –

您poition在expacting地方一個div，並設置一個CSS類和懸停效果：

HTML：

<div class="slider"></div>

CSS：

.slider { 

    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    height: 40px; 
    background-color: red; 
    opacity: 0.1; (Or 0 if invisible) 

} 

.slider:hover { 

    opacity: 1; 

}

我創建的jsfiddle給你： http://jsfiddle.net/E7U78/

來源

2012-12-11 07:09:27 Sam

對不起，讓我補充說，該頁面可以垂直滾動，但toShowOnHover始終是屏幕的底部。我已經編輯了相應的問題。 –

謝謝你，我試過你的jsfiddle。我需要幻燈片出現之前，我甚至徘徊在div的頂部。所以我想知道是否有辦法做到這一點。這是否需要在底部元素上方使用另一個無形的div？ –

如何使用html5完成懸停效果展示，而不是adobe flash

回答

相關問題