Change :hover CSS properties with JavaScript

Pseudo classes like :hover never refer to an element, but to any element that satisfies the conditions of the stylesheet rule. You need to edit the stylesheet rule, append a new rule, or add a new stylesheet that includes the new :hover rule.

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

You can't change or alter the actual :hover selector through Javascript. You can, however, use mouseenter to change the style, and revert back on mouseleave (thanks, @Bryan).

What you can do is change the class of your object and define two classes with different hover 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 this I found on:Change an element's class with 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");