Hover auf gesamten Div-Container?

[wallpaperchen]

Hallo!

Ich habe Probleme, den Hover Effekt über einen Div-Container zu packen...
Irgendetwas mache ich falsch: (soll die Navigation werden. Ich möchte die Schrift normal in weiß und den Hintergrund in weiß haben;
und beim Hover soll beides gleichzeitig invertiert werden...)

HTML:

<div id="Navigation">
<div id="Block"><span>Page1</span></div>
<div id="Block"><a href="Page2.html">Page2</a> </div>
<div id="Block"><a href="Page3">Page3</a> </div>
<div id="Block"><a href="Page4">Page4</a> </div>
</div>

und in der CSS:

#Block:hover {
background: white;
}

#Block a:hover {
color: black;
}
a:hover {
color: black;
}

was mache ich falsch??? - Bis jetzt hat die Schrift einen kleineren Einzugsbereich, als der Div-Container

bei dem Span Element funktioniert übrigends alles einwandfrei!?!?!?!?

 

[MyBad]

AW: Hover auf gesamten Div-Container?

Dein bisheriges HTML-Markup ist schon nicht ganz optimal. IDs sind eindeutig!

Hier mal der Aufbau einer semantisch korrekten Navigation:

<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

CSS:

#navigation a{
  display:block;
  background: #FFF
  color: #000;
}
#navigation a:hover{
 background: #000;
 color: #FFF;
}

display: block; sagt dem a-Tag, dass es sich wie ein Block-Element verhalten soll und passt sich somit an die Breite des Elternelementes an.

 

[wallpaperchen]

AW: Hover auf gesamten Div-Container?

ich hatte das vorher auch mit den Listen gemacht, nur da hatte ich das Problem, dass ich die Abstände der einzelnen Listen-Elementen nach rechts und nach links nicht verändern konnte (sh. unten)


eigentlich wollte ich zu allen Seiten 1Px Rand haben. Nun habe ich automatisch nach oben 1 und nach rechts 3px abstand?!?!?

 

[Snicket]

AW: Hover auf gesamten Div-Container?

zum abstandproblem kann ich nur folgendes sagen:

du musst den nur einer seite zuweisen (right wird in deinem fall richtig sein
denn wenn du um das element den abstand auf allen seiten (oder links+recht) zuweist, addieren sich diese

 

[fexx]

AW: Hover auf gesamten Div-Container?

lad` doch bitte mal ein testcase hoch ... oder poste deinen kompletten css + html code (der listennavigation)

 

[rakader]

AW: Hover auf gesamten Div-Container?

Hatte das Problem kürzlich auch. Evt. musst Du die Reihenfolge von link bis hover etc. beachten. Instruktiv hierzu die Anleitung bei SelfHTML.

 

[gosiggi]

AW: Hover auf gesamten Div-Container?

Es lässt sich im CSS der ID Selektor also # nur auf jeweils ein Element anwenden für alles andere solltest du schon die Zuweisung class="deineCssKlasse" verwenden.

Desweiteren bedenke bitte das ein Hover ohne die Angabe Display:block nicht auf allen Browsern wiedergegeben werden kann sofern es sich nicht um einen Link handelt.

 

[rakader]

AW: Hover auf gesamten Div-Container?

Desweiteren bedenke bitte das ein Hover ohne die Angabe Display:block nicht auf allen Browsern wiedergegeben werden kann sofern es sich nicht um einen Link handelt.

Uh - danke für diesen Hinweis. Kann das der Grund sein, warum Hover in Safari die Hoverfarbe dunkel angibt, wogegen Sie mit der Renderengine von Coda korrekt angezeigt wird?

Allenthalben - dieser Hinweis kommt ins Archiv!