Css hoverbutton (bgcolor wechselt nur für text)

Webdesign & Technik HTML & CSS
1

hi,
ich habe ein menü erstellt und bei den hover buttons wird nur der hintergrund von dem text rot angezeigt aber nicht den ganzen button.

body ul li {background-color: #000000; width: 200px; height: 50px}
body ul li a:hover {background-color: #FFFFFF;}
<ul>
 <li>Startseite</li>
 <li>G&auml;stebuch</li>
 <li>News</li>
.
.
.
</ul>

Wäre nett wenn ihr mir helfen könntet. muss die website bis halb sieben fertig haben :slight_smile:

vg

fabi

2

ah habs hinbekommen.

<ul>
 <a><li>Startseite</li></a>
 <a><li>G&auml;stebuch</li></a>
.
.
.
</ul>
.... ul a:hover li {background-color: #FFF000;}

vg

3

die variante ist aber sicher nicht valide, da

  • nur innerhalb von dir, menu, ol und ul elemente vorkommen darf. Ich nehme mal an bei li handelt es sich um ein block Element.
    Die imho etwas schönere Variante ist das a-element innerhalb des li zu packen und per css die eigenschaft display auf block zu setzen, und zusätzlich dann noch die höhe und breite des a elements an die des li elements anzupassen.

    mfg Balmung