✔ Listen :hover?

[roundaboutmedia]

Hallo, kleine Frage wie bekomme ich einen :hover bei Listen hin?
Stimmt das so wie ich das gemacht habe oder ist das komplett falsch?
Wenn es stimmen sollte wie mach ich das, das sich alles färbt und nicht nur das ul wenn man drüber fährt.
Ich hoffe ihr könnt mir helfen, danke schon mal.

CSS-Code

* {
	padding: 0px;
	margin: 0px;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 0.5em;
	color: #000000;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	min-width: 800px;
}
#head {
	background-image: url(../images/navibgnd.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	height: 40px;
	width: 100%;
}
#navi {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
	width: 800px;
	height: 40px;
	margin-right: auto;
	margin-left: auto;
}
#navi ul {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	list-style: none;
	margin: 0px;
}
#navi li {
	background-image: url(../images/left_no.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding-top: 0px;
	padding-left: 15px;
	float: left;
}
#navi a {
	background-image: url(../images/right_no.png);
	background-repeat: no-repeat;
	background-position: right top;
	display: block;
	margin: 0px;
	padding-top: 7px;
	padding-right: 23px;
	padding-left: 5px;
	padding-bottom: 4px;
	text-decoration: none;
	color: #000000;
}
#navi ul:hover {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	list-style: none;
	margin: 0px;
}
#navi li:hover {
	background-image: url(../images/left_over.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding-top: 0px;
	padding-left: 15px;
	float: left;
}
#navi a:hover {
	background-image: url(../images/right_over.png);
	background-repeat: no-repeat;
	background-position: right top;
	display: block;
	margin: 0px;
	padding-top: 7px;
	padding-right: 23px;
	padding-left: 5px;
	padding-bottom: 4px;
	text-decoration: none;
	color: #000000;
}
#navi #activ {
	background-image: url(../images/left_over.png);
	padding-left: 17px;
	padding-top: 0px;
	margin: 0px;
	background-repeat: no-repeat;
	background-position: left top;
}
#navi #activ a {
	background-image: url(../images/right_over.png);
	background-repeat: no-repeat;
	background-position: right top;
	display: block;
	margin: 0px;
	padding-top: 7px;
	padding-right: 23px;
	padding-left: 4px;
	padding-bottom: 4px;
	text-decoration: none;
	color: #FFFFFF;
}

 

[Maik]

Hi,

wenn du einen kombinierten / zeitgleichen Hover-Effekt für das li- u. a-Element anvisierst, lautet der Selektor für das a-Element stattdessen so:

#navi li:hover a {
        background-image: url(../images/right_over.png);
        background-repeat: no-repeat;
        background-position: right top;
        display: block;
        margin: 0px;
        padding-top: 7px;
        padding-right: 23px;
        padding-left: 5px;
        padding-bottom: 4px;
        text-decoration: none;
        color: #000000;
}

mfg Maik

 

[roundaboutmedia]

Das hört sich gut an, aber da sind ja zwei verschiedene Bilder im Spiel.
Das li-Element hat das left_jpg und das a-Element hat das right_jpg, mach ich dan noch mal ein extra a:hover?

 

[Maik]

Ja und? Hast du die Änderung nicht im Browser betrachtet?

Der Bildertausch ist in dieser Form doch für beide Elemente geregelt - ein a:hover entfällt somit gänzlich:

#navi li:hover {
        background-image: url(../images/left_over.png);
        background-repeat: no-repeat;
        background-position: left top;
        margin: 0px;
        padding-top: 0px;
        padding-left: 15px;
        float: left;
}
#navi li:hover a {
        background-image: url(../images/right_over.png);
        background-repeat: no-repeat;
        background-position: right top;
        display: block;
        margin: 0px;
        padding-top: 7px;
        padding-right: 23px;
        padding-left: 5px;
        padding-bottom: 4px;
        text-decoration: none;
        color: #000000;
}

mfg Maik

 

[roundaboutmedia]

Sorry stand auf dem Schlauch, danke.
klappt wunderbar wie immer nach deiner Antwort