将鼠标悬停在部分 div 上时 div 的 CSS 转换？

Question

让我看看我能解释多好。我正在一个网站上的一个索引上工作，该网站位于一个 div 中，该 div 通过 css 边距被推离页面，仅显示其中的一部分。当您将鼠标悬停在显示的部分上时，其余部分会向下滑动到 View 中。这很好用。我已经为边距更改幻灯片设置了过渡效果，还使用 ​​rgba 更改了背景颜色。看起来很不错。

我的问题是，索引大约有 500 像素宽，悬停前的可见部分高 70 像素。所以这是一个相当大的屏幕区域，如果他们不尝试显示索引 div，人们可能会不小心捕获他们的鼠标悬停。有什么方法可以让 div 的最初可见部分的一部分激活悬停过渡动画以使整个 div 进入 View ？或者也许我可以将一个较小的 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问题，所以我没有检查标签哈哈