dieselross: Overlay unter Auslassung der Navi per css

Hallo liebe Gemeinde,

ich habe 'mal wieder ein kleines Problem:

beim hover über einem Element der Navigation (MainMenu a:hover) soll im div ".main" ein Overlay eingeblendet werden, das die Seite abdunkelt.

Ich habe bisher:
1. das eigentliche Overlay:

.overlay {  
	display: none;  
	position: absolute;  
	top: -15px;  
	left: 0px;  
	background-color: rgba(0,0,0,0.75);  
	width: 100%;  
	height: 100%;  
	margin-bottom: -100%;  
	margin-right: -100%;  
	z-index: 300;  
	-moz-border-radius: 10px;  
	-webkit-border-radius:10px;  
	border-radius: 10px;  
}  

Dieses liegt im div ".main".

2. meinen nicht funktionierenden Codeschnipsel, der Elemente im div ".header", hier genauer eben das "MainMenu a" nutzen soll, um das Overlay sichtbar zu machen:

MainMenu a:hover .overlay {  
	display: block;  
}

Wenn ich das Overlay im css direkt auf display:blocK setze, ist alles so, wie es sein soll. Die z-indices stimmen also. Offenbar mache ich aber Fehler beim Ansprechen der Elemente. Ich komm' nur nicht drauf, welche. Kann jemand helfen?

Gruß
dieselross

--
- life's for learning -
Ceterum censeo IE esse delendam
besucht mich auf www.re-ality.de
  1. Hi,

    MainMenu a:hover .overlay {

    display: block;
    }

      
    Es gibt kein Element in HTML mit dem Tagnamen „MainMenu“.  
      
    MfG ChrisB  
      
    
    -- 
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    
    1. Hi,

      Es gibt kein Element in HTML mit dem Tagnamen „MainMenu“.

      Das war schon 'mal sehr hilfreich, manchmal ist man ja echt vernagelt. Gemeint war natürlich ~~~css .MainMenu a:hover .overlay {
              display: block;
      }

        
      Aber leider scheint auch das nicht zu funktionieren.  
        
      Gruß  
      dieselross
      
      -- 
      - life's for learning -  
      Ceterum censeo IE esse delendam  
      besucht mich auf www.re-ality.de
      
      1. @@dieselross:

        nuqneH

        Aber leider scheint auch das nicht zu funktionieren.

        Da du uns über „das“ völlig im Unklaren lässt, können wir das weder bestätigen noch dementieren.

        Hier entlang.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Da du uns über „das“ völlig im Unklaren lässt, können wir das weder bestätigen noch dementieren.

          Ok, „das“ komplette Paket ist hier zu besichtigen.
          Eigentlich soll der Hauptbereich vom Overlay abgedunkelt werden, sobald der Mauscursor ein a in der Navigation berührt.

          Gruß
          dieselross

          --
          - life's for learning -
          Ceterum censeo IE esse delendam
          besucht mich auf www.re-ality.de
          1. @@dieselross:

            nuqneH

            Ok, „das“ komplette Paket ist hier zu besichtigen.
            Eigentlich soll der Hauptbereich vom Overlay abgedunkelt werden, sobald der Mauscursor ein a in der Navigation berührt.

            Das Element der Klasse "overlay" sitzt im DOM nicht unter einem a-Element innerhalb des "MainMenu". Der Selektor '.MainMenu a:hover .overlay' greift ins Leere.

            Es ist bei der Struktur mit CSS nicht möglich, '.overlay' in Abhängigkeit von '.MainMenu a:hover' zu selektieren.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Es ist bei der Struktur mit CSS nicht möglich, '.overlay' in Abhängigkeit von '.MainMenu a:hover' zu selektieren.

              Mist! So etwas hatte ich befürchtet. Ich vermute, die Selektion über eine ID ist auch nicht möglich? Ich hatte das schon versucht, hat aber auch nicht geklappt.

              Gruß
              dieselross

              --
              - life's for learning -
              Ceterum censeo IE esse delendam
              besucht mich auf www.re-ality.de
              1. @@dieselross:

                nuqneH

                Mist! So etwas hatte ich befürchtet. Ich vermute, die Selektion über eine ID ist auch nicht möglich?

                Nein. Mit CSS kann man sich nur auf Nachfahren- oder Geschwisterelemente beziehen.

                Markup umbauen. Das macht sowieso keinen Sinn:

                <div class="MainMenu">  
                  <ul>  
                    <li><a></a></li>  
                  </ul>  
                  <ul>  
                    <li><a></a></li>  
                  </ul>  
                </div>
                

                Listen mit einem Item? Und statt des div wäre wohl nav angebracht. Und statt Klassen IDs.

                <nav role="navigation" id="MainMenu">  
                  <ul>  
                    <li><a></a></li>  
                    <li><a></a></li>  
                  </ul>  
                  <div id="overlay"></div>  
                </nav>
                

                Wenn du dein Overlay als Geschwisterelment des ul-Elements unterbringst, kannst du es mit
                '#MainMenu ul:hover + #overlay' oder
                '#MainMenu ul:hover ~ #overlay' selektieren.

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. Herzlichen Dank an alle für die Vorschläge.

                  Inzwischen habe ich aus einer anderen Quelle einen funktionierenden Lösungsvorschlag erhalten, den ich euch nicht vorenthalten möchte:

                  Das overlay ist jetzt statt über eine Klasse mit einer ID definiert (statt .overlay jetzt #overlay) und auf display: none; gesetzt.
                  Dann wird es über jedes einzelne a in meiner Navigation wie folgt angesprochen:

                    
                  <a href="#" onmouseover="overlay.style.display='block'" onmouseout="overlay.style.display='none'" >  
                  	<img class="menueicon" src="images/Produkt_A_Icon.png" alt="Produkt_A_Icon" width="40" height="40"> Produkt A  
                  </a>  
                  
                  

                  Funktioniert einwandfrei.

                  Gruß
                  dieselross

                  --
                  - life's for learning -
                  Ceterum censeo IE esse delendam
                  besucht mich auf www.re-ality.de