0

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

请看我的代码示例：http: //jsbin.com/ahmid/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;
}
4

1 回答 1

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

你可以这样做，因为 head 和 content 是兄弟，所以你可以使用兄弟选择器。

这样它就可以正常运行，唯一奇怪的是转换时间不同，但你可以管理这个:-)

于 2013-03-10T19:05:27.250 回答