How can I change CSS with JavaScript for transitions?

Question

Trying:

document.querySelector(".element:hover").style["background"] = "red";

The code didn't work for me because of the ":hover". In order to change the background-color of the element when it has hovered, what can I do?

Does this answer your question? [Change :hover CSS properties with JavaScript](https://stackoverflow.com/questions/11371550/change-hover-css-properties-with-javascript) — showdev, Mar 17 '23 at 03:48

InSync · Accepted Answer · 2023-03-17T03:43:10.497

2

:hover is not something JS can affect. Use CSS instead:

.element:hover {
  background: red;
}

Note that event listeners can also do this, but they would not be as elegant as CSS:

div.addEventListener('mouseover', () => {
  div.classList.add('active');
});

div.addEventListener('mouseout', () => {
  div.classList.remove('active');
});

Try it:

const checkbox = document.querySelector('input');
const div = document.querySelector('div');

div.addEventListener('mouseover', () => {
  if (!checkbox.checked) {
    div.classList.add('active');
  }
});
div.addEventListener('mouseout', () => {
  if (!checkbox.checked) {
    div.classList.remove('active');
  }
});

label:has(:checked) + div:hover,
.active {
  background: red;
}

div {
  margin: 30px 0;
  height: 50px;
  width: 100px;
}

<label>Use CSS: <input type="checkbox" checked></label>

<div>Hover me!</div>

edited Mar 17 '23 at 03:43

answered Mar 17 '23 at 03:32

InSync

4,851
4
8
30

You edited your answer after seeing my answer to add mouseover event :) – Rohit Mar 17 '23 at 03:47
@Rohit I did not :) We edited at the same time but I was slower by a bit. – InSync Mar 17 '23 at 03:48
No issues. Good answer anyways – Rohit Mar 17 '23 at 03:49

score 1 · Answer 2 · answered Mar 17 '23 at 03:39

You can use a CSS variable to control the background on hover, which can also be set in JavaScript.

document.querySelector('button').addEventListener('click', e => {
  document.querySelector('.element').style.setProperty('--background', 'red');
});

.element:hover {
  --background: dodgerblue;
  background: var(--background);
}

<div class="element">
Hover over here
</div>
<button>Change hover color</button>

score 1 · Answer 3 · edited Mar 17 '23 at 04:45

An alternative to @inSync 's approach. In case , you need a pure JS solution , you could use the mouseover event as below :

const myDiv = document.querySelector(".mydiv");

myDiv.addEventListener("mouseover", (event) => {
  event.target.style.background = "Red";
});

<div class="mydiv">
  Hover over me !
</div>

Mouseover event : https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

How can I change CSS with JavaScript for transitions?

3 Answers3