Edit: hover CSS properties using JavaScript

Question

I need to find a way to change CSS: hover properties using JavaScript.

For example, suppose I have this HTML code:

<table> <tr> <td>Hover 1</td> <td>Hover 2</td> </tr> </table> 

And the following CSS code:

 table td:hover { background:#ff0000; } 

I would like to use JavaScript to change the <td> hover properties, say, in the background: # 00ff00. know that I can access the background property of the background using JavaScript, like:

 document.getElementsByTagName("td").style.background="#00ff00"; 

But I don't know the JavaScript equivalent for: hover. How to change these <td>: focus on JavaScript?

Your help is much appreciated!

Answer 1

Pseudo classes, such as :hover , never refer to an element, but to any element that satisfies the conditions of a style sheet rule. You need to edit the style sheet rule, add a new rule, or add a new style sheet that includes the new rule :hover .

 var css = 'table td:hover{ background-color: #00ff00 }'; var style = document.createElement('style'); if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } document.getElementsByTagName('head')[0].appendChild(style); 

Answer 2

You cannot change or change the actual :hover selector through Javascript. However, you can use mouseenter to change the style and return to mouseleave (thanks, @Bryan).

Answer 3

What you can do is change the class of your object and define two classes with different hovering properties. For example:

 .stategood_enabled:hover { background-color:green} .stategood_enabled { background-color:black} .stategood_disabled:hover { background-color:red} .stategood_disabled { background-color:black} 

And I found this: Change the element class using JavaScript

 function changeClass(object,oldClass,newClass) { // remove: //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' ); // replace: var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g'); object.className = object.className.replace( regExp , newClass ); // add //object.className += " "+newClass; } changeClass(myInput.submit,"stategood_disabled"," stategood_enabled"); 

Answer 4

If that suits your purpose, you can add guidance functionality without using css and use the onmouseover event in javascript

Here is a snippet of code

 <div id="mydiv">foo</div> <script> document.getElementById("mydiv").onmouseover = function() { this.style.backgroundColor = "blue"; } </script> 

Answer 5

This does not actually add CSS to the cell, but gives the same effect. Despite the fact that it gives the same result as above, this version is a little more intuitive for me, but I'm a beginner, so take it on its merits:

 $(".hoverCell").bind('mouseover', function() { var old_color = $(this).css("background-color"); $(this)[0].style.backgroundColor = '#ffff00'; $(".hoverCell").bind('mouseout', function () { $(this)[0].style.backgroundColor = old_color; }); }); 

To do this, you must set the class for each of the cells that you want to highlight on "hoverCell".

Answer 6

I had such a need, and I created a small library that supports CSS documents

https://github.com/terotests/css

With this you can specify

 css().bind("TD:hover", { "background" : "00ff00" }); 

It uses the methods mentioned above, and also tries to take care of cross-browser issues. If for some reason an older browser, such as IE9, exists, it will limit the number of STYLE tags because the older IE browser had this weird limit for the number of available STYLE tags on a page.

In addition, it restricts traffic to tags by updating tags only periodically. There is also limited support for creating animation classes.

Answer 7

Declare a global var:

 var td 

Then select your guiena pig <td> , getting its id , if you want to change all of them, then

 window.onload = function () { td = document.getElementsByTagName("td"); } 

Make a function to be run and a loop to change all required td '

 function trigger() { for(var x = 0; x < td.length; x++) { td[x].className = "yournewclass"; } } 

Go to the CSS sheet:

 .yournewclass:hover { background-color: #00ff00; } 

And that’s all, with this you can do all the <td> tags to get background-color: #00ff00; when it freezes, changing its css correctness directly (switching between css classes).

Answer 8

I would recommend replacing all the :hover properties with :active when you find that the device supports touch. Just call this function when you do it as touch()

  function touch() { if ('ontouchstart' in document.documentElement) { for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) { var sheet = document.styleSheets[sheetI]; if (sheet.cssRules) { for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) { var rule = sheet.cssRules[ruleI]; if (rule.selectorText) { rule.selectorText = rule.selectorText.replace(':hover', ':active'); } } } } } } 

Answer 9

Sorry to find this page 7 years later, but here’s a much simpler way to solve this problem (arbitrary hover styles):

HTML:

 <button id=Button>Button Title</button> 

CSS:

 .HoverClass1:hover {color: blue !important; background-color: green !important;} .HoverClass2:hover {color: red !important; background-color: yellow !important;} 

JavaScript:

 var Button=document.getElementById('Button'); /* Clear all previous hover classes */ Button.classList.remove('HoverClass1','HoverClass2'); /* Set the desired hover class */ Button.classList.add('HoverClass1');