Änderung der Textfarbe bei mouseover

Ich bin der Hoffnung, dies zu erreichen, mit reinem CSS und Javascript. Ich bin ok mit PHP als gut. Ich bin die Vermeidung von jquery, weil ich versuche zu lernen javascript ein bisschen mehr, und ich habe festgestellt, dass in einigen Wort-press-Websites, die jquery nicht immer so, wie ich es brauche. So weit wie ich kann erzählen ich habe nicht jede programmatische Fehler, aber ich muss fehlt etwas, weil es anscheinend nicht richtig funktioniert.
Zuerst gebe ich einen link, wo der code zu finden sein. http://jsfiddle.net/FFCFy/13/

Nächstes gebe ich den eigentlichen code.

Javascript:

setInterval(function() {
    var x = document.getElementById("div1");
    var y = document.getElementById("div2");

    function stext() {
        x.style.color = 'red';
        y.style.color = 'black';
    }

    function htext() {
        x.style.color = 'black';
        y.style.color = 'red';
    }
}, 250);

html:

<html>
<body>
    <span id="div1" style="color:black;" onmouseover="stext"   onmouseout="htext">TEXT1</span><p />
    <hr color="black" />
<span id="div2" style="color:red;"onmouseover="htext" onmouseout="stext">Text2</span>

</body>
</html>

Irgendwann werde ich das ändern das ein-und ausblenden, verschiedene text -, aber ich werde kommen, sobald ich dies herausgefunden.

Vielleicht bin ich Missverständnis, deine Frage, aber warum nicht mit CSS :hover? (brauchen Sie, um Elemente <a> tags < IE9, aber werde es ändern, hover-Farbe)
Was genau wollen Sie erreichen?
Nicht einige ältere Browser haben Probleme mit :hover bei einigen element-Typen? Dies ist der Vorteil der Verwendung von jQuery, es weiß, wie es, dies zu umgehen.
die Absicht dahinter NICHT mit CSS-hover ist, dass meine Absicht war, schließlich haben eine änderung, die nicht verwandt war, zu einer einfachen Farbe. Damals 2012 war ich noch zu lernen, und ich war auf der Suche nach einem Weg, um Effekt zu ändern bei mouseover, so konnte ich schließlich Rollen Sie die Idee zu einem größeren Projekt. Die erste Antwort, die ich erhielt, endete als die Lösung, die ich suchte.

InformationsquelleAutor myth024 | 2012-10-31

  1. 2

    Brauchen Sie nicht die setInterval.

    function stext() {
    var x = document.getElementById("div1");
    var y = document.getElementById("div2");
    x.style.color = 'red';
    y.style.color = 'black';
}

    Aktualisiert Arbeiten JSFiddle

    Ich weiß, das ist schon eine wirklich lange Zeit. Ich habe mich über das jetzt und gar nicht daran erinnern, warum ich versuche zu tun, konkret. Danke.

    InformationsquelleAutor Anirudh Ramanathan

  2. 4

    Sind, verwenden Sie einfach diesen code:

    <html>
<head>
<body>
<font onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">Text1</font>
<font onmouseover="this.style.color='black';" onmouseout="this.style.color='red';">Text2</font>
</body>
</html>
    Dies ist eine gute Lösung, aber der code ist falsch. Es sollte onmouseover = "this.**style**.color='red';" und onmouseout = "this.**style**.color='black';" usw. (Verweis)

    InformationsquelleAutor luk27

  3. 2

    warum nicht einfach:

    #div1:hover {
    color: red;
}
    in manchen Fällen bereits vorhandenen CSS hat bereits einen hover-element definiert ist, das kann ich angeben, die änderung mehr dynamisch als auch ein fade-Effekt, im Gegensatz zu nur die änderung einer einfachen Farbe.

    InformationsquelleAutor Bruno

  4. 0

    Brauchen Sie nicht setInterval:

     var x = document.getElementById("div1");
 var y = document.getElementById("div2");
 function stext() {
     x.style.color = 'red';
     y.style.color = 'black';
 }
 function htext() {
     x.style.color = 'black';
     y.style.color = 'red';
 }

    InformationsquelleAutor shaun5

  5. 0

    Ihre Funktionen htext und stext definiert sind, innerhalb einer anonymen Funktion, und daher nicht Global verfügbar. Verschieben Sie die Funktion Definitionen außerhalb der anonymen Funktion, oder weisen Sie die Funktionen für das Globale Objekt (window), damit Sie verfügbar sind.

    Aber dann wieder... Warum ist dieser code innerhalb einer setInterval-Aufruf überhaupt? Das macht keinen Sinn.

    InformationsquelleAutor Hubro

Schreibe einen Kommentar