change the color of text on mouseover in JS

Question

I am very new to JS. My requirement is very simple, to change the color of Text on Mouse Over. I have created 2 JS functions : 1st for MouseOver and 2nd for MouseOut. Can I do it in one single JS function. I have other Text also.

JavaScript

function highlightBG(element) {  
    document.getElementById('element').className='AttachOnMouseOverText';   
}
function highlightOutBG(element){
    document.getElementById('element').className='AttachOnMouseOutText';
}

HTML code :

<td align="center" id="element">
    <img name="folder" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">
    <br>Add Folder
</td>

Answer 1

You can find here the answer using pure-js as you asked :

HTML :

<div id="element" class="AttachOnMouseOutText" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">Hidden text</div>

CSS :

.AttachOnMouseOverText {
    color: white;
}

.AttachOnMouseOutText {
    color: black;
}

Javascript :

function highlightBG() {  
    document.getElementById('element').className='AttachOnMouseOverText';   
}
function highlightOutBG(){
    document.getElementById('element').className='AttachOnMouseOutText';
}

You can see here an example using CSS :hover state.

EDIT

If you want a single function to handle this, try someting like :

function highlightBG(elementName, isIn) {
    if (isIn)
        document.getElementById(elementName).className = 'AttachOnMouseOverText';
    else
        document.getElementById(elementName).className = 'AttachOnMouseOutText';
}

Answer 2

this is simple by using css:

selector:hover
{
  color:red;
}

And you can also use jquery for this

$("selector").on( "mouseover", function() {
  $( this ).css( "color", "red" );
});

Answer 3

If you need the hover change on a link then definitely use a :hover in CSS, it will be the most efficient way.

However if you are looking to add it to a non-link element it can cause issues in IE7 and 8. Have a look at Google Best Practices , in particular the section about :hover. If that is the case then JS is a way to do it.

Answer 4

It might be easier to use jquery to do what you want, if you are using javascript you might just as well make use of jquery. Create a css class to represent the color you want to change the text to, for example

.green{
    color: green;
}

Change your HTML to

<td align="center" id="element">
    <img name="folder" />
    <br>Add Folder
</td>

And add some jquery to add your css class when you move your mouse over 'element', for example

$("#element").mouseover(function(){
    $(this).addClass("green");
});

If you want to change the color back when the mouse leaves the area, you can just remove the class again. For example

$( "#element" ).mouseleave(function() {
    $(this).removeClass("green");
});

Answer 5

Here is the HTML (with an inline ID of "practice"):

<h1 id="practice">Hello!</h1>

Here is the vanilla JavaScript (using a generic function and a callback):

document.getElementById("practice").addEventListener("mouseover", function() {
  document.getElementById("practice").style.color = "pink";
});
document.getElementById("practice").addEventListener("mouseout", function() {
  document.getElementById("practice").style.color = "yellow";
});

Mousing over changes the HTML text to yellow; removing the mouse from the area returns the HTML text to black.