Change Text Color on mouseover

C

5

6

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.

Cretonne answered 31/10, 2012 at 22:20 Comment(4)

Maybe I'm misunderstanding your question, but why not use CSS :hover? (you'd need to make elements <a> tags for < IE9, but it'll change hover color) – Contravene 31/10, 2012 at 22:24

What exactly are you trying to accomplish? – Declarative 31/10, 2012 at 22:25

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. – Ritual 31/10, 2012 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. – Cretonne 31/12, 2015 at 2:36

K

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

Khudari answered 31/10, 2012 at 22:27 Comment(1)

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. – Cretonne 9/6, 2015 at 0:33

C

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>

Colner answered 12/7, 2014 at 13:29 Comment(2)

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) – Winn 4/8, 2015 at 1:49

This worked, and simplifies having to call a separate function - just what I was looking for. Thumbs up. – Saxecoburggotha 30/4, 2019 at 23:20

K

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

Khudari answered 31/10, 2012 at 22:27 Comment(1)

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. – Cretonne 9/6, 2015 at 0:33

M

3

why not just:

#div1:hover {
    color: red;
}

Mercie answered 31/10, 2012 at 22:32 Comment(1)

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. – Cretonne 25/2, 2013 at 17:59

S

0

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

Schiffman answered 31/10, 2012 at 22:27 Comment(0)

D

0

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.

Douceur answered 31/10, 2012 at 22:29 Comment(0)

Javascript:

html:

Recommended topics

Hot tags