Question

让我看看我能解释清楚这一点。我正在研究一个网站上的索引，该网站位于div中，通过css边距从页面中推出，只有部分显示。将鼠标悬停在显示的部分上时，其余部分将向下滑入视图。这很好用。我已经为边距更改幻灯片和rgba的背景颜色更改了过渡效果。它看起来很不错。

我的问题是，索引宽约500px，悬停前的可见部分高70px。所以这是一个相当大的屏幕区域，如果他们不想显示索引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/

只悬停在div的一部分上的div的CSS转换？

2 个答案: