Overlay unter Auslassung der Navi per css

[dieselross]

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

[ChrisB]

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 :/

[dieselross]

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

[Gunnar Bittersmann]

@@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'

[dieselross]

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

[Gunnar Bittersmann]

@@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'

[dieselross]

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

[Gunnar Bittersmann]

@@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'

[dieselross]

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