[HTML/CSS] Frage: Navigation Hover/Selected/Selected Hover

Quote:

Originally Posted by Hydrox Hallo zusammen. Ich bin gerade dabei ein Wordpress Layout umzusetzen und habe in Photoshop eine schicke Navigation gebastelt. Ich habe 5 Navipunkte, jedoch soll später im design unterschieden werden zwischen: Normal, Hover, Selected und Selected Hover. Einen einfachen Hovereffekt konnte ich ganz einfach erzeugen mit: Code: <a href="http://lalala.lala/"><img src="http://localhost/wordpress/wp-content/themes/eskapism/images/home.png"></a> <img src="http://localhost/wordpress/wp-content/themes/eskapism/images/home.png" onmouseover="this.src='http://localhost/wordpress/wp-content/themes/eskapism/images/homeh.png'" onmouseout="this.src='http://localhost/wordpress/wp-content/themes/eskapism/images/home.png'"/> Wie bekomme ich es nun hin, dass bei selektiertem Menüpunkt sich auch das Design des selben ändert? (Habe die Bilder dafür natürlich schon gesliced aber da ich der totalste Leihe bin komme ich an dieser Stelle nicht weiter.. =[ ) Danke schonmal

<div class="navi">
			<ul>
				<li id="nav_home"> <a href="?home.html">Home</a> </li>
				<li id="nav_blog"> <a href="?blog.html">Blog</a> </li>
				<li id="nav_about"> <a href="?about.html">About</a> </li>
				<li id="nav_hilfe"> <a href="?hilfe.html">Hilfe</a> </li>
			</ul>
		</div>

.navi ul li {
	list-style-type: none;
	background-repeat: no-repeat;
}

.navi ul li a {
  	width: 100%;
  	height: 100%;
	display: block;
}

.navi #nav_home {
	background-image: url(test.png);
	width: 60px;
	height: 60px;
}

.navi #nav_home a:hover {
	background-image: url(test_hover.png);
	width: 60px;
	height: 60px;
}