Willkommen auf myCSharp.de! Anmelden | kostenlos registrieren
 | Suche | FAQ

Hauptmenü
myCSharp.de
» Startseite
» Forum
» Suche
» Regeln
» Wie poste ich richtig?

Mitglieder
» Liste / Suche
» Wer ist online?

Ressourcen
» FAQ
» Artikel
» C#-Snippets
» Jobbörse
» Microsoft Docs

Team
» Kontakt
» Cookies
» Spenden
» Datenschutz
» Impressum

  • »
  • Community
  • |
  • Diskussionsforum
[gelöst] jQuery-Problem mit hover
xrc7581
myCSharp.de - Member

Avatar #avatar-3162.jpg


Dabei seit:
Beiträge: 165

Themenstarter:

[gelöst] jQuery-Problem mit hover

beantworten | zitieren | melden

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 ?
Dieser Beitrag wurde 4 mal editiert, zum letzten Mal von xrc7581 am .
private Nachricht | Beiträge des Benutzers
m0rius
myCSharp.de - Member

Avatar #avatar-3125.png


Dabei seit:
Beiträge: 1043

beantworten | zitieren | melden

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
private Nachricht | Beiträge des Benutzers
xrc7581
myCSharp.de - Member

Avatar #avatar-3162.jpg


Dabei seit:
Beiträge: 165

Themenstarter:

beantworten | zitieren | melden

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 !!!
Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von xrc7581 am .
private Nachricht | Beiträge des Benutzers
m0rius
myCSharp.de - Member

Avatar #avatar-3125.png


Dabei seit:
Beiträge: 1043

beantworten | zitieren | melden

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
private Nachricht | Beiträge des Benutzers