nicht angemeldet
hm ._. ich hoffe ich nerve nicht
Nein, keineswegs - sofern etwas hängenbleibt, ist das kein Nerven sondern ein konstruktives Lernen.
jQuery(document).ready(function() {
});
Du musst die Funktion irgendwo aurufen - am besten führst du den Code gleich innerhalb document.ready oder du setzt dort nur den Funktionsaufruf zu einer bereits definierten funktion (siehe mein Beispiel später)
Anbei ein Beispiel mit einem Versuchsaufbau - wenn du dich nach den Sliding Doors richtest, sollest du keine Probleme haben. Die Pseudoklasse :hover fehlt absichtlich, damit du das JavaScript deaktiveren und ausprobieren kannst, wie es sich bei einem Browser verhält, der die Pseudoklasse :hover nicht versteht (der IE 6 z.B.).
Im Script war übrigens noch ein Fehler: removeClass("hover); anstatt removeClass("hover"); (mein Fehler).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Funktion definieren
function navigation() {
// Selektiere alle li-Elemente innerhalb von #navigation
// wende darauf das Event "hover" an
jQuery('#navigation li').hover(
// Ast für onmouseover
function() {
// füge die Klasse hover hinzu
jQuery(this).addClass('hover');
},
// selbriges, nur für onmouseout
function() {
jQuery(this).removeClass('hover');
}
);
}
// Funktion bei fertigem DOM ausführen
jQuery(document).ready(
function() {
navigation();
}
);
</script>
<style type="text/css">
#navigation {
margin: 0;
font: bold 12px sans-serif;
}
#navigation li {
list-style: none;
margin: 0 0 0 -7px;
float: left;
background: #A0E0A0;
position: relative;
z-index: 5;
}
#navigation li a {
background: #80C080;
text-decoration: none;
float: left;
padding: 3px 2px 3px 9px;
margin-right: 7px;
}
#navigation li.cur {
background: #E0A0A0;
z-index: 10;
top: -3px;
}
#navigation li.cur a {
background: #C08080;
padding-top: 6px;
}
#navigation li.hover {
background: #A0A0E0;
z-index: 10;
}
#navigation li.hover a {
background: #8080C0;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="#">foo foo foo</a></li>
<li class="cur"><a href="#">bar bar</a></li>
<li><a href="#">baz</a></li>
<li><a href="#">qux qux qux</a></li>
</ul>
</body>
</html>