CSSでホバー表示ブロックを表示できない理由

ここで状況は、私はhtmlのヘッダーを作りたいと思います。最初はヘッダーを隠しておきたい。私がマウスの上をブラウザの上に置いたとき。ヘッダー表示ブロック。がここにコードCSSでホバー表示ブロックを表示できない理由

<html> 
<head> 
    <style type="text/css"> 

     .atas{ 
      top:0px; 
      background-color: #5F5F5F; 
      width: 100%; 
      height: 50px; 
      position: fixed; 
      right:0px; 
      left:0px; 
      visibility: hidden; 
     } 
     .menu{ 

      text-align: center; 
      width: 100%; 
      height: 50px; 
      background-color: red; 
     } 
     .menu:hover .atas{ 
      visibility: visible; 
     } 
     </style> 
</head> 
<body > 

    <div class="menu">Menu</div> 
    <div class="atas"> 
     </div> 

    </body>

だ私は、 "メニュー" のdivを置くと、なぜそれが "ATAS" のdivを示していませんでし？

出典

2016-05-03 danel

を指定Gauravsの答えのコメントで説明した点滅のdivの問題を解決します。 .atas divの：hover状態もブロックに設定します。ここで

.menu:hover + .atas, .atas:hover { 
    display: block; 
}

対応フィドルは私が見http://jsfiddle.net/Lr67ht6r/2/

出典

2016-05-03 18:38:47

.atasが.menuの子divですが、そうでない場合は、CSSを書いた方法がうまくいきます。ここでは、この

.menu:hover + .atas{ 
    visibility: visible; 
}

のように記述する必要があるので、その兄弟+は、ここで次の兄弟

出典

2016-05-03 18:05:05

ああです！ thanks.Butには次の問題があります。私はメニューdiv.whenをカーソルを移動して表示>非表示> visible.isのように他の方法で改善しますか？ – danel

'display：none'と' display：block'を試してみてください –

まだカーソルを移動していますが、まだメニューdiv.itの領域に表示されます> none> display.whatは私がホバーするときですメニュー領域 "atas" divはonce.when私はそれをhide.do私はjavascriptを使用する必要がありますマウスを表示されますか？ – danel

CSSでホバー表示ブロックを表示できない理由

答えて

関連する問題