:hover class problem

**treeghost** · 24.04.2011 04:00

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 40px 50px;
		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;
<!-- /*Das Bild was hinter dem Button kommt*/-->
	}
	

</style>
</head>
<body>
<!--  Navi  -->
<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>
 <!-- Hier habe ich es ins html eingebunden -->

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. .___.

**Jesus_666** · 24.04.2011 16:22

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.

**treeghost** · 24.04.2011 18:03

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.

**Jesus_666** · 25.04.2011 11:17

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

**treeghost** · 25.04.2011 15:29

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** · 28.04.2011 13:22

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** · 28.04.2011 13:54

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.

Thema: :hover class problem

Themen-Optionen

Anzeige

:hover class problem

Berechtigungen