Mouseover-Buttons und -Effekte mit CSS

[JRB]

Also Du hast zwei gute Möglichkeiten:

Elemente die mehrfach vorkommen: class=""
Element das nur einmal vorkommt: id=""

.ahome       {
    display:block;
    background-image:url(images/home_inactive.gif);
    width:58px; height:25px }

.ahome:hover {
    background-image:url(images/home_active.gif); }

Hier sagst Du alles was class="ahome" 'heißt' schaut so aus. Egal was es für ein Element ist.

Du könntest aber auch gemeint haben: Jeder Link (<a ...></a>) der class="home" 'heißt' soll so aussehen. Das wäre dann:

a.home       {
    display:block;
    background-image:url(images/home_inactive.gif);
    width:58px; height:25px }

a.home:hover {
    background-image:url(images/home_active.gif); }

Sowas gibst Du dann beim HTML Element mit class="" an.

a.home bedeutet es gilt nur für Links. Ohne a vor dem Punkt hast Du es nicht für ein spezielles HTML-Element definiert.

Möchtest du es per id="" nutzen (für elemente die im Dokument nur einmal so formatiert werden) sieht das ganze so aus:

a#home:hover {
    background-image:url(images/home_active.gif); }

oder

#home:hover {
    background-image:url(images/home_active.gif); }

in der html datei steht

<p><ahome href="LINK HIER">&nbsp;</a></p>
  <p><ateam href="LINK HIER">&nbsp;</a></p>
  <p><aschedule href="LINK HIER">&nbsp;</a></p>

Da sollte dann stehen:

<a class="home" href="URI">sinnvoller Text</a>

oder

<a id="home" href="URI">sinnvoller Text</a>

Je nachdem was Du nun verwendest id oder class.

Ich hoffe es war verständlich.

Dann noch der Hinweis: Mouseover mit CSS funktioniert beim MS IE nur für Links. Sonst könntest Du diesen Effekt auf fast jedes Element anwenden.