Mousovereffect in der CSS-Datei

html.de-Forum HTML, XHTML & CSS
1

[FONT=Arial]Hi beisammen ich hab eben grad ein kleines Problem und mir fällt keine logische Lösung ein (ohne Javascript!):

Also ich hab nun ein neues Design erstellt bestehend aus divs…
Die Navigationsleiste wurde ebenfalls aus divs angelegt.

Nun möchte ich für die links einen mousovereffect einbauen.

Für den jetzigen „Startseite“-Link sieht die CSS folgendermaßen aus:
[/FONT]
[html]
#home {
width:119px;
height:39px;
top:0px;
left:246px;
position:absolute;
background:url(images/agcb_03.png);
}

[/html]Mein Lösungsgedanke würde wie folgt aussehen:

[html]
#home {
width:119px;
height:39px;
top:0px;
left:246px;
position:absolute;
background:url(images/BILD1.png);
}

#home a.hover{
width:119px;
height:39px;
top:0px;
left:246px;
position:absolute;
background:url(images/BILD2.png);
}
[/html]
Als Anregung kann ich euch ja mal die Page schicken BITTE schaut nicht auf das häßliche eklige design :stuck_out_tongue_winking_eye: das hab ich nur gemacht um mir die funktionsweise von divs beizubringen ;)))

Link

Ich bedanke mich schonmal für die Hilfe und wünsch euch noch einen schönen Abend
MFG Robert

PS: Falls ihr die komplette CSS Datei nicht einsehen könnt sagt mir einfach bescheid und ich poste sie oder benutzt Firebug :stuck_out_tongue_winking_eye: Aber das wisst ihr eh schon^^

2

Bitte Code-Tags gemäß den Forenregeln verwenden anstatt den Code farbig zu posten.
Danke.

3

Bei nächsten mal pass ich auf :stuck_out_tongue_winking_eye:
Erstmal brauch ich die Lösung :mrgreen:

4

Nein, du editierst bitte deinen Ausgangsbeitrag. Danke.

5

Zufrieden?
Naja hab jetz selbst nen Lösungsgedanken welcher funktioniert:
[HTML]
#home {

width:119px;

height:39px;

top:0px;

left:246px;

position:absolute;

background:url(images/agcb_03.png);

}

#home:hover {

width:119px;

height:39px;

top:0px;

left:246px;

position:absolute;

background:url(images/agcb_030.png);

}
[/HTML]

Gibt es noch ne leichtere Lösung ?`Wo ich den gesamten CSS inhalt nicht doppelt hab?

6

bei #home:hover mußt du nur reinschreiben was sich tatsächlich änert. den rest mußt du nicht wiederholen :wink:

#home {

width:119px;
height:39px;
top:0px;
left:246px;
position:absolute;
background:url(images/agcb_03.png);

}

#home:hover {
background:url(images/agcb_030.png);
}