Change :Hover CSS Properties With JavaScript

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

Change :hover::before CSS property with JavaScript var

Using this link I was able to resolve the issues and have it working as expected.

David Walsch Answer

:root {
--varMenuHoverColor: value;
--greenColor: #78a300;
--whiteColor: #ffffff;

}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu a.mega-menu-link:hover::before {
background-color: var(--varMenuHoverColor);

}

var cssVarGet = getComputedStyle(document.documentElement)
.getPropertyValue('--varMenuHoverColor');

var greenColor = getComputedStyle(document.documentElement)
.getPropertyValue('--greenColor');

var whiteColor = getComputedStyle(document.documentElement)
.getPropertyValue('--whiteColor');

var cssVarSet = function(name, val) {
document.documentElement.style.setProperty(name, val);
};

cssVarSet('--varMenuHoverColor', whiteColor);

Can't change :hover CSS properties with JavaScript

You can solve this just by this:

if (localStorage.getItem('trackerxyz') === 'page_m') {

  var style = '<style>button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}</style>';

  document.head.insertAdjacentHTML('beforeend', style);

}

So no need to create nodes. See insertAdjacentHTML on MDN

how to Change hover styles with Javascript?

Assuming you're talking about a straight conversion to javascript, you could do the following (in jQuery);

$("li").not("active").children("a").hover(function(){
    $(this).css({'background' : '#3e3e3e'});
}, function(){
    $(this).css({'background' : 'youroldcolor'});
});

This works exactly like your css selector, looking first at the li's, ignoring the ones with an active class, then selecting the 'a' children. The use of (this) refers to the targetted element.

Edit

Updated to fix code problems.

Retain CSS :hover when changing CSS styles with Javascript

This is because the inline rule set by JS overrides any CSS rules (unless they have the !important declaration). Instead of setting the color back to the same value, set it to empty to reset it:

else {
    toggle = false;
    btn.style.border = "";
    btn.style.backgroundColor = "";
}

Changing hover background color with javascript

So you want each button click to change the background a bit. I did not understand your hex point, but here is one of the scripts, that calculates background color from given numeric value. In this case its the attribute data-colorvalue

I modified it to fit your case and made it so it adds 10 each click. You can play around the math here, that way you get different colors:

// Grab the button:
const btn = document.querySelector('#btn')

// Detect on click event:
btn.onclick = e => {
    
    // Get the buttons color value, parseInt makes sure its INT:
    let color_value = parseInt(btn.getAttribute('data-colorvalue'))
    
    // Make the R value based on color_value:
    val_r = Math.round((255 * color_value) / 100)
    
    // Make the G value based on color_value:
    val_g = Math.round((255 * (100 - color_value)) / 100)
    
    // Make the B value based on color_value:
    val_b = Math.round(255 - (color_value * 1.5))
    
    // Format and set as buttons background:
    btn.style.backgroundColor = 'rgb(' + val_r + ', ' + val_g + ', ' + val_b + ')'
    
    // Set the new color value plus 10.. you can play with this formula:
    btn.setAttribute('data-colorvalue', color_value + 10)
}

<button id="btn" data-colorvalue="1">Click me</button>

box = document.createElement("div");
box.className = "box";
box.style.backgroundColor = "red";
document.body.appendChild(box);

.box {
    width:100px;
    height:100px;
}

.box:hover {
    background-color: green !important;  
}

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
var declarations = document.createTextNode('selector:pseudo { property: value }');

style.type = 'text/css';

if (style.styleSheet) {
  style.styleSheet.cssText = declarations.nodeValue;
} else {
  style.appendChild(declarations);
}

head.appendChild(style);