CODEWITHSUNDEEP
javascriptcssonmouseoveronmouseout
myth024
myth024

Reputation: 196

Change Text Color on mouseover

I'm hoping to accomplish this using pure CSS and Javascript. I'm ok with PHP as well. I'm avoiding jquery because I'm trying to learn javascript a bit more and I've found that in some word-press sites jquery doesn't always work the way I need it to. As far as I can tell I haven't made any programmatic errors, but I must be missing something because it doesn't seem to be working correctly. First I'll give a link where the code can be found. http://jsfiddle.net/FFCFy/13/

Next I'll give the actual 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>

Eventually I'll be modifying this to hide and show different text, but I'll get to that once I have this figured out.

Upvotes: 6

Views: 72334

Answers (5)

luk27
luk27

Reputation: 81

You can use simply this 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>

Upvotes: 8

Anirudh Ramanathan
Anirudh Ramanathan

Reputation: 46728

You don't need the setInterval.

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

Updated Working JSFiddle

​

Upvotes: 3

Bruno
Bruno

Reputation: 5822

why not just:

#div1:hover {
    color: red;
}

Upvotes: 3

Hubro
Hubro

Reputation: 59313

Your functions htext and stext are defined inside an anonymous function, and therefore not globally available. Move the function definitions outside the anonymous function, or assign the functions to the global object (window) so they're available.

But then again... Why is this code inside a setInterval call anyway? That doesn't make any sense.

Upvotes: 0

user626963
user626963

Reputation:

You don't need 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';
 }

Upvotes: 0

Related Questions