javascript - change the color of text on mouseover in JS - Stack Overflow

admin管理员组

文章数量:1399887

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>

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>

• javascript
• html
• css

Share Improve this question Follow edited Feb 28, 2014 at 11:09 Jean-Rémy Revy 5,67733 gold badges4242 silver badges6565 bronze badges asked Feb 28, 2014 at 11:02 VasuVasu 31911 gold badge88 silver badges2020 bronze badges 4

• 2 You can do things like that with javascript. But you should be looking into CSS (as you tagged it) you can use an elements parent and the :hover selector to change appearance. You will also don't need a mouseOutText class, since the :hover status will be removed as soon as you leave the certain element. – Nico O Commented Feb 28, 2014 at 11:06
• Here is an example: jsfiddle/5NA9q (don't use tables for lists as i did here, i followed your code.) – Nico O Commented Feb 28, 2014 at 11:12
• Yeah right..but what about bining the two functions into a single one? The CSS classess surely solves my purpose,but I was thinking that we could perhaps do away with writing two jscript for each mouseover/mouseout event. Instead, we should call one single jscript function where we can pass parameters like out/over and id to set the style of the Text. Secondly, 'Add Folder' is not the only Text, but i have few more Texts in <td>'s which should also have the same effect – Vasu Commented Feb 28, 2014 at 12:51
• I mean, lets see my JS code : function highlightBG(element) { document.getElementById('element').className='AttachOnMouseOverText'; } function highlightOutBG(element1){ document.getElementById('element1').className='AttachOnMouseOutText'; } Here istead of having two JS functions i want to use single JS and may be pass parameters to it – Vasu Commented Feb 28, 2014 at 12:52

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

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" );
});

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.

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");
});

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.

本文标签： javascriptchange the color of text on mouseover in JSStack Overflow