鼠標懸停時更改文本顏色

Question

我希望使用純CSS和Javascript來實現這一目標。 我也熟悉PHP。 我正在避免使用jquery，因為我正在嘗試更多地學習javascript而且我發現在某些word-press網站中，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>

最終我將修改它以隱藏和顯示不同的文本，但是一旦我弄明白，我就會明白這一點。

Answer 1

你可以使用這個代碼：

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

Answer 2

為什么不呢：

#div1:hover {
    color: red;
}

Answer 3

您不需要setInterval 。

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

更新工作JSFiddle

Answer 4

你不需要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';
 }

Answer 5

您的函數htext和stext是在匿名函數內定義的，因此不是全局可用的。 將函數定義移到匿名函數之外，或將函數分配給全局對象（窗口），以便它們可用。

但話又說回來......為什么這個代碼在setInterval調用中呢？ 這沒有任何意義。

鼠標懸停時更改文本顏色

問題描述

使用Javascript：

HTML：

5 個解決方案

解決方案1
6 2014-07-12 13:29:00

解決方案2
3 2012-10-31 22:32:28

解決方案3
2 已采納 2012-10-31 22:27:09

解決方案4
0 2012-10-31 22:27:12

解決方案5
0 2012-10-31 22:29:57

鼠標懸停時更改文本顏色

問題描述

使用Javascript：

HTML：

5 個解決方案

解決方案1 6 2014-07-12 13:29:00

解決方案2 3 2012-10-31 22:32:28

解決方案3 2 已采納 2012-10-31 22:27:09

解決方案4 0 2012-10-31 22:27:12

解決方案5 0 2012-10-31 22:29:57

解決方案1
6 2014-07-12 13:29:00

解決方案2
3 2012-10-31 22:32:28

解決方案3
2 已采納 2012-10-31 22:27:09

解決方案4
0 2012-10-31 22:27:12

解決方案5
0 2012-10-31 22:29:57