Menu
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.
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>
<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.
856
Changing link color on hover using CSS To change the color of your link on hover, use the :hover pseudo property on the link's class and give it a different color.
If you want to change the link color when moving the mouse over a link, you only need the A:hover line. hover - The hover option is the color that the text changes to when the mouse is over the link. In this example, the link changes to a blue color when a mouse cursor is hovering over a link.
To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.
To add a text on hover, you'll need to use the title attribute. In this snippet, we'll use it on the <div>, <span>, <abbr>, and <p> elements.
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>
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
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
