鼠标悬停在 div 的一部分上时 div 的 CSS 过渡？

Question

让我看看我能解释得如何。我正在一个网站上的索引上工作，该索引位于一个div中，该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/

< strong>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 标签具有相对位置属性。请删除它。