:hover class problem

HTML-Code:

#navi { background: url(navi.PNG) repeat; height: 66px; margin: 0 auto; position: fixed; top: 0; left: 0px; width: 100%; z-index: 100; } #navi li { float: left; text-align: center;  } #navi li a { display: block; font-size: 25px; height: 10px; padding: 20px; margin:0px 30px 40px 50px; text-shadow: 1px 1px 2px #000; text-transform: uppercase;  } #navi li a:hover { background: url(nav1.PNG); background-repeat:no-repeat; background-position: center; color: #fff; text-align: center;  } </style> </head> <body>  <div class="navi"> <ul id="navi"> <li><a href="/">Home</a></li> <li><a href="/">Game</a></li> <li><a href="/">Home</a></li> </ul> </div> 

Soweit funktioniert es, jedoch will ich das ich für jeden dieser 3 Links ein anderes background image kommt. Gibt es eine möglichkeit OHNE jetzt für jeden Link die gleiche prozedur zu machen? Ich sitz schon seid 3 Stunden drann. .___.

Geht ganz einfach:
Code (CSS3):
 
#navi li:nth-child(2)
{
	background-image: url(nav2.png)
}
#navi li:nth-child(3)
{
	background-image: url(nav3.png)
}
 
Achtung: Das ist CSS3 und wird von älteren Browsern nicht korrekt unterstützt. Besonders auf die IE-Fraktion solltest du achten, weil die oft noch in uralten Versionen wie IE7 rumgurken, denen :nth-child nichts sagt. Aber du solltesto sowieso deine Seite mit allen Browsern testen, die du darauf erwartest.

Ach ja, du solltest dich allgemein mal über die CSS3-Selektoren schlau machen. Dinge wie :nth-child(even) können sehr praktisch sein.

Zitat:
Zitat von Jesus_666
Geht ganz einfach:
Code (CSS3):
 
#navi li:nth-child(2)
{
	background-image: url(nav2.png)
}
#navi li:nth-child(3)
{
	background-image: url(nav3.png)
}
 
Achtung: Das ist CSS3 und wird von älteren Browsern nicht korrekt unterstützt. Besonders auf die IE-Fraktion solltest du achten, weil die oft noch in uralten Versionen wie IE7 rumgurken, denen :nth-child nichts sagt. Aber du solltesto sowieso deine Seite mit allen Browsern testen, die du darauf erwartest.

Ach ja, du solltest dich allgemein mal über die CSS3-Selektoren schlau machen. Dinge wie :nth-child(even) können sehr praktisch sein.
Sollte auf den neusten Browsern laufen laut sitepoint. Jedoch sind mir die meisten anderen Browser egal, solange es in Opera und Firefox läuft. CSS3 ist doch sehr praktisch geworden, vorallem finde ich border-radius sehr hilfreich.

Jedoch wird :nth-child, wie ich gelesen habe, auch über a:hover gemacht. Das würde dann so aussehen:

HTML-Code:

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

Hm, ich müsste mir mal ein Ordner mit ganz vielen Code-Schnippsel anlegen. Das kann sich doch kein Mensch merken. :D

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

HTML-Code:

#navi { background: url(navi.PNG) repeat; height: 66px; margin: 0 auto; position: fixed; top: 0; left: 0px; width: 100%; z-index: 100;  } #navi li { float: left; text-align: center;  } #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;  } #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; } 

Ich bin nicht so gut im erklären. :(

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',''); }); });

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.