:hover class problem

[Jesus_666]

Was meinst du mit "über a:hover gemacht"?

[treeghost]

HTML-Code:

#navi {
	background: url(navi.PNG) repeat;
	height: 66px;
	margin: 0 auto;
	position: fixed;
	top: 0;
    left: 0px;
	width: 100%;
    z-index: 100; <!-- /*Die Navigationsbar schwebt über den Inhalt*/-->

	}
	
	#navi li {
		float: left;
        text-align: center; <!-- /*Positionierung*/-->

	}
	
	#navi li a {
		display: block;
		font-size: 25px;
		height: 10px;
		padding: 20px;
		margin:0px 30px 20px 30px;
		text-shadow: 1px 1px 2px #000;
		text-transform: uppercase; <!-- /*Der Button*/-->
		
	}

#navi li a:hover {
	background: url(nav1.PNG);
	background-repeat:no-repeat;
	background-position: center;
	color: #fff;
        text-align: center;
	}
	
	#navi li:nth-child(2) a:hover{
	background: url(nav2.PNG);
	background-repeat:no-repeat;
	background-position: center;
}

#navi li:nth-child(3) a:hover{
	background: url(nav3.PNG);
	background-repeat:no-repeat;
	background-position: center;
}

#navi li:nth-child(4) a:hover{
	background: url(nav4.PNG);
	background-repeat:no-repeat;
	background-position: center;
}	

#navi li:nth-child(5) a:hover{
	background: url(nav5.PNG);
	background-repeat:no-repeat;
	background-position: center;
}
#navi li:nth-child(6) a:hover{
	background: url(nav6.PNG);
	background-repeat:no-repeat;
	background-position: center;
} <!-- /*nav1 ist wie gesagt der erste Button dann kommen die anderen die ich über nth-child() a:hover gemacht habe. Ohne a:hover hat es nicht funktioniert, da sonst sich nur background-image permanent verändert hätte*/-->

Ich bin nicht so gut im erklären.

[Hendy]

Wie wärs per javascript mit jquery?

Code(ungetestet):

Code:

$(function() {
    $('#navi li').eq(0).hover(
function() { $(this).css('backgroundImage','path/to/img1'); },
function() { $(this).css('backgroundImage',''); });

    $('#navi li').eq(1).hover(
function() { $(this).css('backgroundImage','path/to/img2'); },
function() { $(this).css('backgroundImage',''); });

    $('#navi li').eq(2).hover(
function() { $(this).css('backgroundImage','path/to/img3'); },
function() { $(this).css('backgroundImage',''); });
});

[treeghost]

Wäre eine möglichkeit gewesen, warscheinlich auch die einfachste aber wenn ich schonmal dabei war das ganze selber zu schreiben wollte ich
schon bei CSS bleiben. Zudem ähnelt der Script ja der :nth-child() classe wenn ich mich nicht irre.