Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
188
rated 0 times [  191] [ 3]  / answers: 1 / hits: 70393  / 12 Years ago, wed, october 31, 2012, 12:00:00

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.


More From » css

 Answers
101

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




[#82260] Monday, October 29, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
micheleb

Total Points: 275
Total Questions: 103
Total Answers: 103

Location: Macau
Member since Sat, Jul 11, 2020
4 Years ago
micheleb questions
;