1

これは、ヘッダー DIV の CSS です。

#header { 
  display: block;
  float: left;
  min-width: 100%;
  min-height: 170px;
  height: auto; 
  background-color: #030309; 
  background-color: #191718; 
  position:fixed; 
  margin-top: -210px; 
  z-index: 999999; 
  opacity:.76;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  top: 0;
}

これはホバー状態です。

#header:hover { 
  display:block; 
  opacity:1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;   
  transition: opacity 1s ease-in-out;
}

ヘッダーがデフォルトで非表示になり、ホバーすると表示されるようにしたいもの。何度も追加しようとしましたdisplay: noneが、うまくいきません。私も何度も試しましたが、ヘッダーの下のコンテンツが固定されたままで、ページの上部からは見えないため、問題ありません。#headerdisplay:block;#header:hoveropacity:0;#headeropacity:1;#header:hover

いくつかの提案？

4

3 に答える 3

5

" display: none;" は、要素がドキュメント フローから削除されたことを意味します。そのため、ホバーするものが何もないため、:hover 状態にすることはできません。

visibility: hidden;代わりに(事実上 と同じ)を考えていますopacity: 0;か?

outline:ドキュメント ビューポートにボックスが表示されるように CSS に追加してみてください。

于 2012-06-22T23:25:23.590 に答える
2

最初に、ヘッダーが表示されない原因となっているが、ホバーmargin-top:-210px時にヘッダーを下に移動することはありません。0それを取り出してください。次に、opacity通常は 0 に設定し、ホバー時に 1 に設定すると、ホバー時にフェードインします。

デモ

または、下にスライドさせたい場合は、トランジションを just opacitytoに変更し、状態allを a に設定します。また、要素の一部が表示され、ユーザーがその上にカーソルを合わせることができるように、負の上部余白よりも大きい高さを設定する必要があります。に設定しました。top:0:hover220px

関連する CSS の変更:

#header {
    top:-210px;
    height: 220px;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

#header:hover {
    opacity:1;
    top:0px;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}​

デモ

于 2012-06-22T23:27:25.170 に答える
0

あなたがやろうとしていることは意味がありません.ヘッダーは最初は見えないので、ホバーすることはできません. それが表示されない理由です。

あなたができることは次のとおりです。

  • あなたがしたように、最初はブロックを非表示にします。
  • #header要素を別の要素でラップします。id でタグ付けしているとしましょう#header-container。
  • CSS を使用します。#header-container:hover #header { display: block; }

これにより、クライアントが を表示するために要素を提供し、最初は非hover表示にすることができます。#header

于 2012-06-22T23:27:29.923 に答える