Laden...

[gelöst] jQuery-Problem mit hover

Erstellt von xrc7581 vor 11 Jahren Letzter Beitrag vor 11 Jahren 1.242 Views
xrc7581 Themenstarter:in
156 Beiträge seit 2010
vor 11 Jahren
[gelöst] jQuery-Problem mit hover

jquery-1.8.1.min

Hallo,
ich versuche gerade meine ersten Schritte in jQuery.Aber ich komme bei dem Einbinden der hover-Funktion nicht weiter.

Ich habe eine HTML-Tabelle mit der ID "standorte".Diese sieht wie folgt aus:


<table id="standorte">
<tr>
<th>Standort</th>
<th>Mitarbeiter</th>
<th>Seit</th>
</tr>
<tr>
<td>München</td>
<td>1000</td>
<td>1995</td>
</tr>
<tr>
<td>Berlin</td>
<td>5000</td>
<td>1989</td>
</tr>

also nicht so spektakulär 😉
folgende jQuery-Anweisungen zum Einfärben der Tabelle funktionieren auch:


$('#standorte tr:odd').css('background-color', '#ccc');
$('#standorte tr:even').css('background-color', '#eee');
$('#standorte tr:first').css('background-color', '#aaa');

Das Problem habe ich bei der hover-Funktion,mit der ich die aktuelle Zeile hervorheben möchte:
Ich bekomme per "console.log" leider keine Ausgabe von mouseover und mouseout


<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('.menu > ul > li > a').click(function () {
$(this).next('ul').slideToggle();
});

$('#standorte tr:odd').css('background-color', '#ccc');

$('#standorte tr:even').css('background-color', '#eee');

$('#standorte tr:first').css('background-color', '#aaa');

// funktioniert leider nicht
$('#standorte tr:not(tr:first)').hover(function () {
//Mouseover
console.log('mouseover');
}, function () {
//Mouseout
console.log('mouseout');
});
});
//]]>
</script>

Ich habe es auch schon mit verschiedenen Browsern getestet(FF,IE,Chrome),das hat mich leider auch nicht weitergebracht...
Weiß jemand,woran das liegen könnte ?

1.002 Beiträge seit 2007
vor 11 Jahren

Hallo xrc7581,

dein jQuery-Selektor ist falsch — das zweite tr gehört dort nicht hin. Korrekt wäre demnach $("#standorte tr:not(:first)"). Auch möglich wäre $("#standorte").find("tr:gt(0)"), also die Selektion aller Zeilen mit einem Index größer als 0.

Im übrigen eignet sich JsFiddle wunderbar, um dein Problem zum Debuggen zur Verfügung zu stellen. Anhand deines Beispiels sähe das so aus.

m0rius

Mein Blog: blog.mariusschulz.com
Hochwertige Malerarbeiten in Magdeburg und Umgebung: M'Decor, Ihr Maler für Magdeburg

xrc7581 Themenstarter:in
156 Beiträge seit 2010
vor 11 Jahren

Hallo m0rius,
alles funktioniert bestens, dank deiner Hilfe.

Ich hatte das Statementtr:not(tr:first) so verstanden, dass mir alle tr-Elemente,außer dem ersten tr zurückgegeben werden.

Da hatte ich wohl daneben gelegen 😭

P.S. Danke für JsFiddle !!! 👍

1.002 Beiträge seit 2007
vor 11 Jahren

Hallo xrc7581,

das macht es ja – fast – auch, nur war dort eben ein tr zu viel enthalten.

m0rius

P.S: Bitte denk das nächste Mal daran, deinen Code einzurücken. Das erleichtert die Lesbarkeit enorm und sorgt vermutlich auch dafür, dass du mehr Antworten bekommst.

Mein Blog: blog.mariusschulz.com
Hochwertige Malerarbeiten in Magdeburg und Umgebung: M'Decor, Ihr Maler für Magdeburg