CSS hover 上的 div 僅過渡到部分 div？

Question

讓我看看我能解釋多好。 我正在一個網站上的一個索引上工作，該網站位於一個 div 中，該 div 通過 css 邊距被推離頁面，僅顯示部分內容。 當您將 hover 滑過顯示的部分時，rest 會向下滑動到視圖中。 這很好用。 我已經為邊距更改幻燈片設置了過渡效果，還使用 rgba 更改了背景顏色。 看起來很不錯。

我的問題是，索引大約有 500 像素寬，懸停前的可見部分高 70 像素。 所以這是一個相當大的屏幕區域，如果他們不嘗試顯示索引 div，人們可能會不小心用鼠標抓住 hover。 有什么方法可以讓 div 的最初可見部分激活 hover 轉換 animation 以使整個 div 可見嗎？ 或者也許我可以將一個較小的 div 作為一種選項卡附加到這個 div，這將通過 hover 上的轉換降低較大的 div 和它本身？

我希望這是有道理的。 謝謝你。

這是當前代碼的基本思想：

#index {
    position:fixed;
    background:rgba(0,0,0,0.3);
    width:500px;
    height:500px;
    top:0;
    left:50%;
    margin:-430px 0 0 -500px;
    transition:0.5s;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    -o-transition:0.5s;}

#index:hover {
    background:rgba(0,0,0,0.8);
    margin:0 0 0 -500px;}

Answer 1

的jsfiddle：

http://jsfiddle.net/wZ8zX/1/

HTML：

<div id="slider"><div id="trigger"><br></div></div>

JS：

$('#trigger').hover(function(){
    $(this).parent().animate({'top':0},500); 
});
$('#slider').mouseleave(function(){
    $(this).animate({'top':-150},500); 
});

---

沒有jQuery的解決方案：
http://jsfiddle.net/wZ8zX/3/

對不起，我通常只是瀏覽jquery問題，所以我沒有檢查標簽大聲笑

Answer 2

僅使用CSS，您可以使用另一個塊或偽元素來覆蓋您不希望轉換的塊的部分，然后，在懸停之后，為過渡大於重疊元素的元素創建z-index，所以它的所有內容都是可以訪問的。

這是一個例子的小提琴： http ： //jsfiddle.net/kizu/Y3px6/1/

Answer 3

這來自 position:relative 屬性。 我強烈認為您當前的 div 標簽具有 position 相關屬性。 請刪除它。