DIV und a:hover

[CSS Depp]

hallo,

ich benutze überwiegend dreamweaver und mache mir dann .css stylesheets.
zumindesten was das css angeht möchte ich einen gewisse kompatibiltät
und versuche daher auf microsoft-unfug wie TABLE und FONT zu verzichten.

kann mir mal jemand ein ganz einfaches beipiel für DIV und a:hover geben -
falls das überhaupt funktioniert.

mein css sieht so aus .. ich mache grundsätzlich klassen:

.example {
background-color: #000;
}

.example:hover {
background-color: #999;
}


bei dingen wie "color" für ein P ist das, wie wir alle wissen, kein problem.
aber bei "background-color" für DIV scheint es nicht zu gehen.

ich habe 2 ältere postings zum selben thema hier gefunden, die mir auch
nicht weitergeholfen haben

ich habe es bereits mit tricks versucht: mit "background-image" und mit "border"
gehts auch nicht für DIV .

vielleicht mache ich ja nur einen denkfehler ... aber ich möchte wirklich mal
lernen wie das geht, einen blöden kkasten zu machen, der die farbe ändert
wenn die maus drüber geht ... ohne javascript, was mir für komplexe sites
einfach zu langsam ist..

 

[Gumbo]

Der Internet Explorer unterstützt die Pseudoklasse :hover nur bei a-Elementen.

 

[CSS Depp]

sowas hab doch ich befürchtet !

dann muss ich wohl weiterhin mein berühmtes

<div id="Layer1"
onMouseOver="this.style.backgroundColor='#666666'"
onMouseOut="this.style.backgroundColor='#555555'"
style= ...>
</div>

benutzen.

hab ich lange dran herum gebastelt bis das in allen browsern ging ... fühle mich
aber immer noch sehr unsicher dabei.

bis jetzt konte mir noch niemand erklären, warum mein fantasie code überhaupt
funktioniert.

 

[Sven Mintel]

Dein Fantasiecode ist schlicht korrekt... deshalb funktioniert er

 

[CSS Depp]

Dein Fantasiecode ist schlicht korrekt... deshalb funktioniert er

weisst du wie man das kaskadiert ? wie muss das aussehen wenn
ich 2 sachen mit onMouseOver steuern will, zb color und width ?
ich bekomms nicht hin.

 

[Sven Mintel]

trenne die Anweisungen durch ein Semikolon.

 onMouseOver="this.style.backgroundColor='#666666';this.style.width='100px';"

...du kannst auch dem Element einen anderen CSS-Klassennamen zuweisen...ist in dem Fall möglicherweise praktischer

onmouseover="this.className='klassenname'"

 

[CSS Depp]

hervorragend, danke.