Change Text Color on mouseover

Question

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.

Maybe I'm misunderstanding your question, but why not use CSS `:hover`? (you'd need to make elements `` tags for < IE9, but it'll change hover color) — Scrimothy, Oct 31 '12 at 22:24
Don't some older browsers have problems with `:hover` on some element types? This is the benefit of using jQuery, it knows how to work around this. — Barmar, Oct 31 '12 at 22:36
the purpose behind NOT using CSS hover is that my intention was to eventually have a change that wasn't related to a simple color. Back then in 2012 I was still learning and I was looking for a way to effect change on mouse over so I could eventually roll the idea into a bigger project. The first answer I received ended up being the solution I was looking for. — myth024, Dec 31 '15 at 02:36

luk27 · Answer 1 · 2019-02-22T19:35:41.643

8

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>

edited Feb 22 '19 at 19:35

answered Jul 12 '14 at 13:29

luk27

81
1
7

3

This is a good solution, but the code is incorrect. It should be `onmouseover = "this.**style**.color='red';"` and `onmouseout = "this.**style**.color='black';"`, etc. ([Reference](http://www.w3schools.com/jsref/prop_style_color.asp)) – Luke Aug 04 '15 at 01:49
1

This worked, and simplifies having to call a separate function - just what I was looking for. Thumbs up. – nukalov Apr 30 '19 at 23:20

Anirudh Ramanathan · Accepted Answer · 2015-06-09T04:36:11.410

3

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

edited Jun 09 '15 at 04:36

answered Oct 31 '12 at 22:27

Anirudh Ramanathan

46,179
22
132
191

I know this has been a really long time. I've gone beyond this now and don't even remember why I was trying to do this specifically. Thanks. – myth024 Jun 09 '15 at 00:33

score 3 · Answer 3 · answered Oct 31 '12 at 22:32

3

why not just:

#div1:hover {
    color: red;
}

answered Oct 31 '12 at 22:32

Bruno

5,772
1
26
43

in some cases pre-existing CSS already has a hover element defined with this I can specify the change more dynamically as well as do a fade effect as opposed to just changing a simple color. – myth024 Feb 25 '13 at 17:59

score 0 · Answer 4 · answered Oct 31 '12 at 22:27

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

score 0 · Answer 5 · answered Oct 31 '12 at 22:29

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.

Change Text Color on mouseover

Javascript:

html:

5 Answers5