Mit Javscript wäre alles einfacher (?)

[Enrico]

Hallo,

ich habe folgende Nevigationsleiste:

++
                                          ++
                                          ++
+----------+ +------+ +-------+ +-----+  +  +  +-----------+
|Startseite| |Verein| |Kontakt| |Links|  +  +  |Rechtliches|
+----------+ +------+ +-------+ +-----+   ++   +-----------+

Die "Keule" soll hierbei eine Glühbirne darstellen.

Ich möchte nun über eine reine css-Lösung erreichen, dass bei MouseOver, also "hover", über einen der Menüpunkte die Grafik der Glühbirne gewechselt wird:

MouseOver: Glühbirne an
MouseOut:  Glühbirne aus

Nachfolgender Code liegt dem Konstrukt zugrunde:

---
   CSS
   ---

div#Startseite
      {
         background: url(../Grafiken/Schaltflaechen/_startseite_out.png) no-repeat;
         height:     18px;
         position:   absolute;
         left:       0px;
         top:        65px;
         width:      101px;
         z-index:    30;
      }

div#Verein
      {
         background: url(../Grafiken/Schaltflaechen/_verein_out.png) no-repeat;
         height:     17px;
         left:       114px;
         ...
      }

...

----
   html
   ----

<a href=""><div id="Startseite"></div></a>
      <a href=""><div id="Verein"></div></a>
      ...

Bitte nicht an den Identifikationsnamen etc. "stoßen", diese sind derzeit nur zu Testzwecken so gewählt.

Mein Problem ist nun, dass ich den gewünschten Effekt nicht umgesetzt bekomme.

Ich kann beim hover-Ereignis über die Glühbirne die Hintergrundgrafik ändern und habe auch schon versucht, einen span-Bereich für jeden Link zu definieren, der im Grund genommen jedesmal die gleiche Grafik ("Glühbirne aus") mit entsprechender Ausrichtung enthält, aber das kann sicherlich nicht im Sinne des Erfinders sein, Zumal hier die Breite der Glühbirne entweder abgeschnitten ist oder die Links sich auf die Breite der Glühbirne ausdehnen.

Dies bedeutet, dass ich den div für die Glühbirne auslagern und als eigenständigen div darstellen muss und deshalb hier keine Beziehungen über Selektoren aufbauen kann, weilkeine direkten Beziehungen bestehen.

Wie muss ich vorgehen?

Mittels Javascript wäre es wesentlich (?) einfacher (?), da ich dann lediglich OnMouseOver und OnMouseOut einbauen müsste, der Effekt aber nicht sichtbar wäre, wenn jemand die Unterstützung von Javascript ausgeschaltet hat.

Vielen Dank für eure Hilfe.

Gruß
Enrico

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

eine Glühbirne ist eine von Wespen ausgehöhlte Frucht, in der Glühwürmchen eine Party feiern.

Ich konnte noch keinen Grund für die Verwendung eines Divs erkennen. Eine Navigationsliste ist eine Liste. Allerhöchstens brauchst du ein Div, um die Liste mit einer Überschrift zu kombinieren.

<div id="nav">
  <h3>Hier gehts lang</h3>
  <ul>
    <li><a href="...">Seite1</a></li>
    <li>aktuelle Seite</li>
    <li><a href="...">Seite3</a></li>
    <li><a href="...">Seite4</a></li>
    <li id="lampe"></li>
  </ul>
</div>

Es ist wichtig, dass die Lampe als letztes in der Liste steht, damit der Geschwisterselektor greift. Die Listenelemente werden entsprechend positioniert und für die Lampe verwendest du nur ein Hintergrundbild.

das mouseover erledigt li:hover ~ #lampe {background-position: ...}

Matthias

[bleicher]

Grüße,
ich denke die lampe könnte auch hinterdgrund der liste sein, oder?
MFG
bleicher

[Matthias Apsel]

Om nah hoo pez nyeetz, bleicher!

ich denke die lampe könnte auch hinterdgrund der liste sein, oder?

Es gibt auch Bereiche, die zur Liste gehören, aber kein Listenelement sind, zum Beispiel die Lampe selbst, wenn man über der Lampe ist, soll sie dunkel sein.

Matthias

[Enrico]

Hallo Matthias,

danke für Dein Konstrukt :-)

Funktioniert soweit fast einwandfrei.

Jetzt muss ich nur noch den Effekt hinbekommen, dass die Glühbirne wieder "ausgeschaltet" wird, sobald ich jetzt oder links aus dem Link draußen bin, der Wechsel, wenn ich vertikal in einen Link "rein- oder rausfahre" haupt schon hin.

Gruß
Enrico

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

Jetzt muss ich nur noch den Effekt hinbekommen, dass die Glühbirne wieder "ausgeschaltet" wird, sobald ich jetzt oder links aus dem Link draußen bin, der Wechsel, wenn ich vertikal in einen Link "rein- oder rausfahre" haupt schon hin.

Die Glühlampe wird mit li:hover geschaltet, nicht mit a:hover. Vermutlich stoßen die Listenelemente seitlich zusammen. Gib ihnen mal zu Testzwecken einen Rahmen.

Möglicherweise möchtest du auch, dass beim Überfahren des Linkelements der aktuellen Seite die Lampe nicht geschaltet wird. Gib diesem dazu eine Klasse (oder warte, bis Gunnar das liest, der hat immer so verwegenen Ideen auf Lager ;-)).

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Die Glühlampe wird mit li:hover geschaltet, nicht mit a:hover.

Soso, wird sie?

Möglicherweise möchtest du auch, dass beim Überfahren des Linkelements der aktuellen Seite die Lampe nicht geschaltet wird.

Ja!!1elf Die anne Lampe zeigt ja: hier passiert was. Beim Menüpunkt der aktuellen Seite passiert aber nichts, also sollte die Lampe aus bleiben.

Gib diesem dazu eine Klasse (oder warte, bis Gunnar das liest, der hat immer so verwegenen Ideen auf Lager ;-)).

Ach komm, so verwegen ist die Idee, nicht mit li:hover, sondern mit a:hover zu schalten, doch gar nicht.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ach komm, so verwegen ist die Idee, nicht mit li:hover, sondern mit a:hover zu schalten, doch gar nicht.

Was aber mit meiner vorgeschlagenen Struktur nicht funktioniert, denn die Links sind keine Geschwister der Lampe.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Was aber mit meiner vorgeschlagenen Struktur nicht funktioniert

Aber mit meiner.

Qapla'

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

eine Glühbirne ist eine von Wespen ausgehöhlte Frucht, in der Glühwürmchen eine Party feiern.

Immer diese Leute, die sich am Begriff für elektrisches Fallobst stoßen, tsts.

Allerhöchstens brauchst du ein Div, um die Liste mit einer Überschrift zu kombinieren.

<div id="nav">

Das 'div'-Element darf in HTML5 dann auch ein 'nav'-Element sein.

~~~html

<h3>Hier gehts lang</h3>

<ul>
    <li><a href="...">Seite1</a></li>
    <li>aktuelle Seite</li>
    <li><a href="...">Seite3</a></li>
    <li><a href="...">Seite4</a></li>
    <li id="lampe"></li>
  </ul>
</div>

>   
> Es ist wichtig, dass die Lampe als letztes in der Liste steht  
  
Warum sollte sie? Was hat sie überhaupt in der Liste zu suchen? Zusätzliches Markup für visuelle Effekthascherei? Wie uncool!  
  
~~~html
<nav>  
  <ul>  
    <li><a href="...">Seite1</a></li>  
    <li>aktuelle Seite</li>  
    <li><a href="...">Seite3</a></li>  
    <li><a href="...">Seite4</a></li>  
  </ul>  
</nav>

Stylesheet:

nav  
{  
	position: relative;  
	width: 240px;  
}  
  
nav ul  
{  
	list-style: none;  
	padding: 0;  
}  
  
nav li  
{  
	float: left;  
	margin: 0;  
	padding: 0;  
	width: 42px;  
}  
  
nav li:last-child  
{  
	float: right;  
}  
  
nav::after, nav a:hover::after  
{  
	background: url(glühbirne.png);  
	content: '\A0';  
	display: block;  
	height: 42px;  
	position: absolute;  
	right: 42px;  
	top: 0;  
	width: 42px;  
}  
  
nav a:hover::after  
{  
	background-position: 0 42px;  
	z-index: 1;  
}

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

nav::after, nav a:hover::after { background: url(glühbirne.png); content: '\A0'; display: block; height: 42px; position: absolute; right: 42px; top: 0; width: 42px; }

nav a:hover::after { background-position: 0 42px; z-index: 1; }[/code]

Du hast mich nicht enttäuscht.

Matthias