CSS and JavaScript: Function to Change Color Effects Hover Style

CSS and Javascript: Function to change color effects hover style

Instead of setting the color directly, it would be cleaner (and more effective to use a class).

CSS :

#test {color: blue;}
#test.active {color:red;}
#test:hover {color:green;}

JavaScript :

function change() {
   document.getElementById("test").className='active';
}

demonstration

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>

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

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 backgroundColor with javascript affects CSS's :hover

instead of changing the color with javascript, use javascript to add and remove a class (for example .current) to the active "button" and then style the .current class accordingly in CSS. jQuery would be the most elegant solution to do that using the addClass(),removeClass() or toggleClass() functions.

To explain the idea a bit further:

When you click on a button, you add a class to its class attribute instead of adding inline style properties. This allows to style them via your CSS stylesheet.

In jQuery it is really easy. You can do something like this:

$(".menubutton").click(function () {
    $(".menubutton").removeClass("current");
    $(this).addClass("current");
});

Step-by-step:

you first look for all DOM elements with class menubutton by calling $(".menubutton"). Then by using .click() you trigger an event if one of the menubutton elements gets clicked. The function(){} includes the functions that get executed on click. First

$(".menubutton").removeClass("current");

again gets all objects with class menubutton and removes the class current from any of them that have it. Second

$(this).addClass("current");

adds class current ti "this" ... meaning the clicked object.

This will make the clicked object in the DOM look something like this:

<div class="menubutton current">

In your CSS you can now style the objects that has the additional current class:

.currnet {
    background-color:blue;
    color:white;
}

DEMO

In pure JavaScript this will be a bit more tricky. Maybe this thread can give you some more insight into that:

How to add/remove a class in JavaScript?

Losing hover and active styles in HTML when change button background in javascript

Guessing due to the fact there is missing code in your example. The CSS in element style supersedes the class CSS so background and color in :hover wouldn't take effect. If you clear the inactive state with blank string, the :hover in the css class should work again.

function selectEditor() {
//Changes background to white and font color to red (inactive state)
btnAutor.style.background = "";
btnAutor.style.color = "";

//Changes background to red and font color to white (active state)
btnEditor.style.background = "var(--mRed)";
btnEditor.style.color = "white";

//Changes background to white and font color to red (inactive state)
 btnMiembro.style.background = "";
 btnMiembro.style.color = "";
}

Button hover does not work after I change button color using JS

button click adds inline styles which have higher priority due to that hover property changes are ignored. You can add !important to get rid of the issue

.button1:hover {
     background-color: red !important;
     color: black !important;
     border: 2px solid #4caf50;
}

<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4caf50;
      }

      .button1:hover {
        background-color: red !important;
        color: black !important;
        border: 2px solid #4caf50;
      }
    </style>

    <script>
      var count = 1;
      function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
          property.style.backgroundColor = "white";
          count = 1;
        } else {
          property.style.backgroundColor = color;
          count = 0;
        }
      }
    </script>
  </head>

  <body>
    <h2>Hoverable Buttons</h2>
    <button
      id="buttonGreen"
      class="button button1"
      onclick="setColor('buttonGreen', '#122256')"
      ;
    >
      Green
    </button>
  </body>
</html>

Change div color when mousehover in javascript

You can either give the id="abc" to input itself or do something like this:

<div id="abc">
  <input style="color: inherit" type="text">
</div>

Working Codepen

Change color of div when hovering over li

I'm stacking on top of both answers above. I did a little rearranging of the code and I think I finally got what you are looking for. I tucked the <li> tag inside of the <a> tags, at which point the entire element even when a border is added became clicable.

$(document).ready(function() {  $('li').mouseenter(function() {    var color = $(this).data('color');    $('#mbg').css('background-color', color);  });  $('li').mouseout(function() {    $('#mbg').css('background-color', 'blue');  });});

.resources {  width: 17%;  height: 100vh;  overflow: hidden;  position: absolute;  z-index: 1;  border-right: solid 1px #C5C5C5;  box-shadow: 2px 0px 2px -1px #DCDCDC;}.resources ul {  text-align: right;  padding: 0;  margin: auto 0;}.resources ul > li a {  list-style-type: none;  height: 65px;  background: #00ADEF;  border-bottom: solid #0088BC 1px;  vertical-align: middle;  overflow: hidden;  padding: 0;  box-shadow: 0px -1px 5px -2px #222 inset;  box-sizing: border-box;  transition: .5s;}.resources ul li a:hover {  border-right: 25px solid #8CC63E;  vertical-align: middle;  overflow: hidden;  /*transition: .5s;*/}.resources li a {  line-height: 1em;  text-decoration: none;  color: white;  font-size: 20px;  font-weight: bold;  display: block;  padding: 1.13em;}#mbg {  position: absolute;  background-color: blue;  width: 100%;  height: 100vh;  margin-left: 17%;}#layoutsTable {  border: solid 1px #f08721;  height: 100vh;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div id="mbody">  <div class="resources">    <ul>      <a href="#">        <li data-color="#380606">Policies</a>      </li>      <a href="#">        <li data-color="#191919">LMS</a>      </li>
      <a href="#">        <li data-color="#cbcbcb">Tips & Tricks</a>      </li>      <li data-color="#f08721"><a href="#">Forms</a>      </li>    </ul>  </div>  <div id="mbg"></div></div>

---

Related Topics