0

CSSで簡単な自動非表示メニュー/ヘッダーを作成しようとしています。私は遷移を使用しますが、これはここではポイントではないと思います。ホバーするとヘッダーが下にスライドしてコンテンツ全体が表示され、マウスを離すと上にスライドするはずです。わたしにはできる。ヘッダーがスライドアップされたときに画面コンテンツも展開したい。これは市長の問題です。ページ全体 (画面) に 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;
}
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 に答える