web-dev-qa-db-ja.com

マウスオーバー時にテキストの色を変更する

私は純粋なCSSとJavascriptを使用してこれを達成したいと思っています。 PHPでも大丈夫です。JavaScriptをもう少し学ぼうとしているので、jqueryを避けています。一部のワードプレスサイトでは、jqueryがそうではないことがわかりました。常に必要な方法で動作します。プログラム上のエラーは発生していませんが、正しく動作していないように見えるため、何かが不足している必要があります。最初に、次のリンクを示します。コードが見つかります。 http://jsfiddle.net/FFCFy/13/

次に、実際のコードを示します。

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>

最終的には、これを変更して別のテキストを表示および非表示にしますが、これを理解したら、これに到達します。

javascriptcssonmouseoveronmouseout
5
myth024

setIntervalは必要ありません。

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

更新された作業JSFiddle

2
Anirudh Ramanathan

あなたは単にこのコードを使うことができます：

<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>
6
luk27

なぜだけではないのですか？

#div1:hover {
    color: red;
}
3
Bruno

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';
 }
0
shaun5

関数htextとstextは無名関数内で定義されているため、グローバルに使用することはできません。関数定義を無名関数の外に移動するか、関数をグローバルオブジェクト（ウィンドウ）に割り当てて使用できるようにします。

しかし、もう一度...とにかくsetInterval呼び出し内のこのコードはなぜですか？それは意味がありません。

0
Hubro