屏幕滑动（无JS）的CSS动画标题

我试图用CSS创建简单的自动隐藏菜单/标题。我使用过渡，但我认为这不是重点。当我悬停标题是应该滑下来，并显示整个内容，当我移动鼠标它应该上滑。这个对我有用。我还希望屏幕内容在标题为slidedup时展开。这是市长问题。我知道在整个页面（屏幕）上扩展div的唯一方法是修正其顶部，底部，左侧&的权利。当最高价值发生变化时，它不起作用。屏幕滑动（无JS）的CSS动画标题

请看看我的代码示例： http://jsbin.com/ahamid/2/edit

绿色的部分是有问题的。我试图通过改变鼠标悬停的最大值来修复它 - 但是，当鼠标不在标题外的内容&时也不起作用。

下面是代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div id="main"> 
    <div id="head"> 
     <span> header </span> 
    </div> 
    <div id="content"> 
     <span> 
     test content 
     </span> 
    </div> 
    </div> 
</body> 
</html>

和css：

body { 
    position: relative; 
} 
#main { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    background-color: white; 
} 
#head { 
    display: block; 
    height: 50px; 
    top: -44px; 
    right: 0px; 
    left: 0px; 
    background-color: #fcc; 
    margin: 0px 3px; 
    position: absolute; 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -o-transition: 0.5s; 
} 
#head:hover { 
    height: 50px; 
    background-color: red; 
    top:0px; 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
} 
#content { 
    background-color: cfc; 
    position: absolute; 
    top: 50px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    margin: 3px; 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
} 
#head span { 
color: black; 
font-weight: bold; 
transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
-o-transition: 0.5s; 
} 
#head:hover span { 
    color: yellow; 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
} 
#content:hover { 
    top: 6px; 
transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
-o-transition: 0.5s; 
}

来源

2013-03-10 Saram

我觉得现在的问题是，你设置的＃内容，你希望它是上徘徊。

你真正想要的是什么，它始终是这样的，只有改变它;在#head

变化的悬停（向下增加顶部）＃内容到：

#content { 
    background-color: cfc; 
    ..... 
    top: 6px; 
    ..... 
}

和修改头悬停顶部：

#head:hover ~ #content { 
    top: 50px; 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -o-transition: 0.5s; 
}

你可以这样做，因为头和内容是兄弟，所以你可以使用兄弟选择。

这样，它正确的行为，唯一奇怪的是来自过渡的时刻是不同的，但你可以管理这个:-)

来源

2013-03-10 19:05:27 vals

谢谢！这是完美的！这里是工作结果：http://jsbin.com/ahamid/7 我压缩了一点点Css＆试过它与“邻接兄弟选择器”，也很好。 – Saram 2013-03-10 20:18:52

屏幕滑动（无JS）的CSS动画标题

回答

相关问题