CSS过渡的div悬停在div的一部分

Question

让我看看我能不能解释清楚。我正在一个网站上的索引，这是在一个div是推下的页面通过css边距只有一部分显示。当您将鼠标悬停在正在显示的部分上时，其余部分将滑入视图。这很好。我已经为边缘变化幻灯片设置了过渡效果，并使用rgba更改了背景颜色。它看起来很漂亮。

我的问题是，索引宽约500px，悬停前可见部分高70px。因此，这是一个相当大的屏幕面积，人们无意中捕捉到他们的鼠标悬停，如果他们不试图显示索引div。有没有办法，我只能让div的最初可见部分的一部分激活悬停过渡动画，使整个div进入视图?或者我可以在这个div上附加一个小的div作为标签，在悬停时通过过渡把大的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问题，所以我没有检查标签lol

Answer 2

仅使用CSS，您可以使用另一个块，或伪元素来覆盖块的部分，你不想有过渡，然后，悬停后，使z-index元素的过渡大于覆盖元素，所以它的所有内容将是可访问的。

下面是一个示例:http://jsfiddle.net/kizu/Y3px6/1/

Answer 3

这来自position:relative属性。我强烈地感觉到你当前的div标签有位置相对属性。