Question

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

请查看我的代码示例： 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;
}

Answer 1

我认为问题在于您将#content设置为悬停时的内容。

你真正想要的是它总是这样，只在#head

的悬停中改变它（向下;增加顶部）

将#content更改为：

#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;
}

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

这种方式行为正确，唯一奇怪的事情来自转换时间不同，但你可以管理： - ）

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

1 个答案: