Adding class to hoverable element with JavaScript

Question

I have a button, which changes its color on hover.

const btn = document.querySelector('.btn');
btn.classList.add('green-background');

.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background {
  background: green;
}

<input class="btn" type="submit" value="Click me" />

I would like to add it the green-background class, so that the button is green in default state and on hover as well.

So why make it magenta in the first place ? ... simply remove background: magenta; from the hover rule — Asons
– Asons, Commented Mar 31, 2019 at 18:39
@LGSon Because before js worked I wanted it to be magenta on hover. — Eugene Barsky
– Eugene Barsky, Commented Mar 31, 2019 at 18:42
Then increase specificity for the green background with e.g. .btn.green-background and when the class gets added, it stays green — Asons
– Asons, Commented Mar 31, 2019 at 18:44
Yes, e.g. like this (first hover the button, then click it to add the class, hover again) jsfiddle.net/15kjd03e/1 — Asons
– Asons, Commented Apr 1, 2019 at 5:58

daformat · Accepted Answer · 2019-03-31 18:11:53Z

1

You just need to add a css rule that specifies the style for .green-background on hover, which you can do by setting styles for .green-background:hover

const btn = document.querySelector('.btn');
btn.classList.add('green-background');

.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background, .green-background:hover {
  background: green;
}

<input class="btn" type="submit" value="Click me" />

answered Mar 31, 2019 at 18:11

daformat

7865 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maheer Ali · Accepted Answer · 2019-03-31 18:18:32Z

1

You can combine two selectors using , the default and the hover. See Groups of selectors on one rule for more information.

const btn = document.querySelector('.btn');
btn.classList.add('green-background');

.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background:hover,.green-background {
  background: green;
}

<input class="btn" type="submit" value="Click me" />

edited Mar 31, 2019 at 18:18

answered Mar 31, 2019 at 18:10

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

Razmik Ghookas · Accepted Answer · 2019-03-31 18:35:27Z

 function changeclass() {
            const btn = document.querySelector('.btn');
            if (!btn.classList.contains('green-background'))
                btn.classList.add('green-background');
            else
                btn.classList.remove('green-background');

        }

<!-- language: lang-css -->

    .btn {
      text-decoration: none;
      background: blue;
      color: white;
      font-size: 20px;
    }

    .btn:hover {
      background: magenta;
      cursor: pointer;
    }

    .green-background, .green-background:hover {
      background: green;
    }

<!-- language: lang-html -->

    <input class="btn" type="submit" value="Click me" onmouseover="changeclass()" onmouseout="changeclass()" />

you asked how to add class by java script : just add onmouseover="changeclass()" onmouseout="changeclass()" event to button and changeclass function but you can also do it by css same as the approved answer.

Collectives™ on Stack Overflow

Adding class to hoverable element with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related