LX: Navigation mit MOuseover

Beitrag lesen

Verwende die Pseudoklasse :hover in CSS - und schreibe einen Inhalt versteckt in den Link, damit die Sehbehinderten auch was von Deiner Seite haben:

HTML:

<a href="/kontakt" id="nav-kontakt"><span>Kontakt</span></a>

CSS:

#nav-kontakt { display: block; height: 18px; width: 80px; background: url(/wp-content/themes/wpremix2/images/navi/schrift1.png) 0px 0px no-repeat; }  
#nav-kontakt:hover { background-image: url(/wp-content/themes/wpremix2/images/navi/1.jpg); }  
#nav-kontakt span { display: none; }

Natürlich musst Du Höhe und Breite anpassen. Wenn Du schon dabei bist, den Code zu überarbeiten, kannst Du gleich darüber nachdenken, ob eine ul-Liste nicht semantischer als ein einfaches div wäre, um das Menü zu strukturieren.

Gruß, LX

--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)