Jquery each <li> gelten die mouseover-hintergrund

Kann nicht scheinen, um diese arbeiten:

$(function() {
  $("#side").$("li").each(function() {
    $(this).mouseover(function() {
      $(this).backgroundColor = "#c0c0c0";
    });
  });
});

HTML-snippet zu Durchlaufen:

<div id='side'>
   <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>
</div>
Was genau ist der Fehler??? Können Sie bitte den HTML-code?
Ein jQuery-Objekt weder ein $ noch ein backgroundColor Eigenschaft. Warum glaubst du hat Sie? schlage ich vor zu Lesen einen der jQuery tutorials und haben Sie einen Blick auf Dokumentation. Es scheint, haben Sie lernen die Grundlagen zuerst.
Du hast Recht. Ich bin es gewohnt, plain Javascript, so dass ich versuchen zu lernen, ein bisschen jQuery, dann starten hacking. Sollte ich verbringen mehr Zeit mit dem Lesen.

InformationsquelleAutor Jonathan | 2012-03-12

  1. 4

    Versuchen Sie dies:

    $(function() {
    $("#side").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#FFF"); 
        });
    });
});​

    Die Probleme, die ich sah, waren:

    1. Der Selektor, das Sie verwenden für Ihre ul/li war falsch. Sie müssen die Kinder-Methode.
    2. Ändern der css ist anders in jquery dann javascript. Verwenden Sie die css-Methode statt.
    3. Stellen Sie sicher, um die Farbe zu ändern auf Standard zurück (in diesem Fall weiß) wenn die Maus verlässt. Sonst wird es immer sein, dass graue (auch wenn die Maus lässt).

    Dem JSFiddle: http://jsfiddle.net/L8hsz/

    Hoffe, das hilft.

    BEARBEITEN: Wenn Sie sind besorgt über die Hintergrundfarbe, die Sie tun können, etwas ähnliches wie:

    $(function() {
    $("#side").children("li").each(function() {
        $(this).data("DefaultBGColor", $(this).css("background-color"));
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", $(this).data("DefaultBGColor")); 
        });
    });
});​
    Dank der freundlichen sir 🙂
    Siehe Antwort bearbeitet für auto säumigen die bg Farbe.
    Wunderbar! PS: ich musste eine änderung: $("#side > ul").children("li").each um es an die Arbeit für mich ^^
    ah, mit meinem code das ul hatte die id der Seite, also deins, ich vermute, Sie umhüllt das ul durch ein div mit der id der Seite?
    Richtig!!!! 🙂 Look up! 😉 Aber du bist ein Genie, ich danke Ihnen für Ihre Zeit!

    InformationsquelleAutor Ben

  2. 2

    Ich denke, Sie können die hover-event:

    $(function() {
    $("#side").children("li").hover(
        function() {
            $(this).css ("background-Color", "#c0c0c0");
        },
        function() {
            $(this).css("background-Color", "#FFF"); 
        }
   );
});​
    Was ist der zweite Teil für mit der Einstellung auf weiß? Gibt es eine Möglichkeit für Sie, um eine temporäre änderung? Dies scheint, wie es ist zu vergessen die früheren background-Color Einstellung? Will ich pflegen den hart codierten hintergrund-Farbe, die sich unter jedem Punkt der Liste, sowieso wird versuchen, diese!
    Dann müssen Sie zum speichern der ursprünglichen Farbe zuerst, bevor Sie eine neue zuordnen. E. g. mit .data().
    Könnten Sie $(this).removeAttr('style'); anstatt es zurück zu #fff
    Ich werde testen und ich kann wirklich nicht Holen Sie sich das Beispiel oben zu arbeiten. Mit dem HTML-snippet in Frage, sind Sie sicher, dass das funktioniert? Tut den Kindern $('#Seite') nur abholen <ul>?
    Ich änderte es $("#Seite > ul").children("li").jeder-und es funktionierte. Trotzdem danke!

    InformationsquelleAutor Filype

  3. 0

    Nur ein fyi - für li-block hover-Effekte, die Sie nicht brauchen, javascript oder Jquery, diese kann getan werden, zu 100% in CSS. Die einzige Ausnahme ist, wenn Sie auf Arbeit mit IE6.

    Ich Gabel-Ben ' s Kommentar oben:

    http://jsfiddle.net/stevembrennan/tLZNL/

    Markup aus dem Ursprünglichen Beispiel

    • 1
    • 2
    • 3

    CSS hinzufügen

    ul {float:left; left:0; position:absolute; right:auto;  width:auto;}
li {clear:left; float: left; left:auto; margin:0px; width:100%; text-align:left;      display:block; background-color:#00a0e1;}
li a {display:block; padding:4px 10px;}
li a:hover {background-color:red;}

    Kein JS benötigt

    Wenn Sie Hilfe brauchen, wie das im IE6, lassen Sie es mich wissen. Gibt es einen trick, in dem Sie hinzufügen können, ein block-element um die ganze Sache und es trick das schweben in kicking in. Entschuldigung für so eine späte Antwort.

    InformationsquelleAutor Steve

Schreibe einen Kommentar