ändern sich eine unterschiedlichen div-Klasse auf mouseover

Gibt es viele Beispiele, aber ich kann nicht finden, die richtige für mich - ich glaube, mir ist ein einfaches Beispiel.

Habe ich wie folgt:

<li onmouseover="this.className='change-here2'" onmouseout="this.className='change-here'"> 
    <div class="change-here">
       Text Here
    </div>
</li>

Dem li-element hat ein Hintergrundbild und hover-Effekt, ändert sich das Hintergrundbild.

Mit diese.className änderungen der li-Klasse, wenn das, was ich will, ist zu ändern die div unten ist es Klasse.

Sollte ich nicht in der Lage sein zu ändern diese zu div.ändern-hier, oder etwas ähnliches? Ich weiß nicht, die syntax...

Jede Hilfe ist willkommen.

BEARBEITEN: TimWolla ' s Lösung funktioniert hervorragend. Danke an Euch alle.

dein Beispiel ist nicht sehr hilfreich, wenn der use-case nicht erklärt werden.. sind Sie versucht, es zu benutzen, für Ihr Foto hochladen, oder etwas anderes? Es sieht aus wie Sie css-Regeln, die an Ort und Stelle... so bin ich wenigstens noch verloren.

InformationsquelleAutor elzi | 2012-01-18

  1. 10

    Warum verwenden nicht Sie nur CSS?

    li .class { background-color: red; }
li:hover .class { background-color: green; }

    Finden Sie unter: http://jsfiddle.net/TimWolla/zp2td/

    Besser als meine Lösung 🙂 ... obwohl mir sollte trotzdem funktionieren.. upvote
    NÖ. Er wollte ändern Sie die Klasse des div, nicht die Klasse der li.
    geändert, meine Antwort zu integrieren, alle die Vorschläge, da es ein wenig komplexer, als nur die änderung das aktuelle element div.
    Das funktioniert Brillant. Ich war mit der Vererbung-Klassen, wie den auch, nicht sicher, warum ich nicht daran gedacht. Danke!!!!

    InformationsquelleAutor TimWolla

  2. 1

    Können Sie etwas tun, um die Auswirkungen des $(this).Kinder(':first').addClass('ändern-hier');?

    OP nie angegeben jQuery. Schlagen Sie es und geben die OP ein Grund, es zu benutzen.
    Sollte erwähnt werden, durch javascript-wissen ist praktisch nill, also bin ich nicht sicher, wie Sie Sie umsetzen,...
    jQuery ist nur eine JS-Datei, die Sie importieren. Es registriert eine Tonne von nützlichen Funktionen, die machen diese Art der Arbeit ein Stück Kuchen. docs.jquery.com/Tutorials:Getting_Started_with_jQuery
    wie @Mixer hat festgestellt, dass es mit jQuery... wünschen, wir wussten mehr über das Projekt, aber im Grunde, Sie die *.js-lib von jquery.com in Ihre html-Seite ein, und dann können Sie mit der notation von oben auf hinzufügen/entfernen in der Klasse. Dann wieder, abhängig von der Nutzung-Fall, ich denke, dass TimWolla eventuell eine bessere alternative, es sei denn, Sie haben einige seltsame business-Logik, die Sie implementieren müssen.
    Hier: nerdi.net/playground/photag

    InformationsquelleAutor Richard B

  3. 1

    Kann ich empfehlen:

    var lis = document.getElementsByTagName('li');

for (var i=0, len=lis.length; i<len; i++){
    lis[i].onmouseover = function(){
        var firstDiv = this.getElementsByTagName('div')[0];
        firstDiv.className = 'change-here';
    };
    lis[i].onmouseout = function(){
        var firstDiv = this.getElementsByTagName('div')[0];
        firstDiv.className = '';
    };
}

    JS Fiddle demo.

    Der Grund, warum ich unter diesem Ansatz, anstatt die in-line - onmouseover - Attribut, um es etwas leichter zu passen in der Fall of die Anforderungen ändern zu einem späteren Zeitpunkt. Auch gibt es etwas weniger 'aufdringlich' dies ist der Weg, und verlässt das html etwas einfacher zu Lesen. Es ist natürlich eine persönliche Präferenz, aber.

    Es ist erwähnenswert, dass der CSS-Ansatz, wie bereits erwähnt, durch TimWolla ist weit sinnvoller, als mit JavaScript.

    Ich muß gestehen, ich war neugierig, wie der down-vote. Irgendwelche Ideen? (Wenn ich Vorschlage, etwas falsch oder nutzlos dann würde ich gerne wissen, so kann ich ändern, meinen Ansatz und passe meinen Ansatz für die nachfolgenden Antworten).

    InformationsquelleAutor David Thomas

  4. 1

    Aktualisiert, die Antwort zu übernehmen, alle Vorschläge

    <style>
    .div_1 {
        color: #F00;
    }
    .div_2 {
        color: #0F0;
    }
</style>
<li onMouseOver="this.childNodes[0].className = 'div_1';" onMouseOut="this.childNodes[0].className = 'div_2';"> 
    <div class="div_1">
       Text Here
    </div>
</li>
    Er wollte ändern Sie die Klasse des div, nicht die Klasse der li.
    Das funktioniert, aber dann ist der hover-berührt wird nur ausgelöst, indem der Mauszeiger über das DIV-element, das ist ein kleines Bild, anstatt das li-element, das ist viel größer.

    InformationsquelleAutor Silvertiger

  5. 0

    Sollte dies funktionieren:

    this.childNodes[0].className = 'change-here';

    InformationsquelleAutor Blender

Schreibe einen Kommentar