2016-05-03 6 views
1


so hier die Situation nicht anzeigen, ich möchte einen Header für HTML machen. und zuerst möchte ich die header ist versteckt. und wenn ich meine Maus über den Browser lege. der Header-Anzeigeblock. Hier ist der CodeWarum kann ich Block auf Schwebeflug in 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> 

warum es hat nicht die "atas" div zeigen, wenn ich die "Menü" div schweben?

Antwort

1

hier schreiben, ist eine Lösung für das blinkende divs Problem in den Kommentaren der Gauravs Antwort beschrieben. Setzen Sie auch den: Hover-Status des .atas div-Blocks auf block.

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

Hier ist die entsprechende Geige http://jsfiddle.net/Lr67ht6r/2/

2

Die Art, wie Sie das CSS geschrieben haben, funktioniert, wenn .atas Kinddiv von .menu ist, aber es ist nicht. Seine Geschwister so müssen Sie dieses

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

Hier + gibt den nächsten Geschwister

+0

ahh ich sehe! thanks.but gibt es nächstes Problem, wenn ich das Menü div.whe bewege, wenn ich den Cursor bewege, es gerade wie sichtbares> verstecktes> visible.is gibt es andere Weise, besser zu machen? – danel

+0

versuchen Sie es mit 'display: none' und' display: block' –

+0

es ist immer noch das gleiche.wenn ich den Cursor bewegen, aber immer noch im Bereich des Menüs div.it wird> none> display.what ich will ist, wenn ich schweben Der Menübereich der "atas" div wird einmal angezeigt. Wenn ich die Maus aus, wird es ausblenden. Muss ich Javascript verwenden? – danel