Want to add class when hover the div with Vanilla JavaScript

Question

I want to add a class when hovering the any of this div, but not the hovering one, I mean if I hover over the number 2 div, the class will be added to the number 1 and number 3 div, if I hover over the number 3 class will be added to 1 and 2, is this possible?

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

If you don't explain what is that you're trying to achieve exactly, this is nothing more than an [XY Problem](https://en.wikipedia.org/wiki/XY_problem) - because sometimes a problem - knowing the exact peculiarities can be solved by other means - sometimes not with the tools you initially intended to. Also, please read [ask]. — Roko C. Buljan, Oct 16 '22 at 18:11
Does this answers your question? https://stackoverflow.com/a/30835337/383904 — Roko C. Buljan, Oct 16 '22 at 18:30
@RokoC.Buljan He wanted it to be done in vanilla javascript, not css. — Lukas, Oct 16 '22 at 18:35
when hovering one div, I want to add class to the other two divs, the code I got from here works perfectly — Mainul, Oct 16 '22 at 18:37

score 1 · Answer 1 · answered Oct 16 '22 at 18:51

Two solutions: the first using CSS and the second using JS.

As you can see from this related answer, JS is not needed:

.wrapper:hover div:not(:hover) {
  background: red;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

but if you really insist in using JS:

Use mouseenter and mouseleave events
Use Element.classList and its respective methods

const elDivs = document.querySelectorAll(".wrapper div");

const toggleClassDivs = (evt) => {
  const isEnter = evt.type === "mouseenter";
  elDivs.forEach(el => el.classList[isEnter ? "add" : "remove"]("red"));
  evt.currentTarget.classList.remove("red");
};

elDivs.forEach(el => {
  el.addEventListener("mouseenter", toggleClassDivs);
  el.addEventListener("mouseleave", toggleClassDivs);
});

.red {background: red;}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Lukas · Answer 2 · 2022-10-16T18:30:13.143

Use events mouseenter and mouseleave and inside them use for to go through all divs and when index === i (i = index = index of hovering div) then just continue and don't add class. Like that.

let divs = document.querySelectorAll("div");

divs.forEach((div, index) => {
   div.addEventListener("mouseenter", () => {
     toggleClass(divs, index, true)
   })
   div.addEventListener("mouseleave", () => {
      toggleClass(divs, index, false)
   })
})

function toggleClass(divs, index, add){
   for(let i = 0; i < divs.length; i++){
        if(i === index) continue;
        add ? divs[i].classList.add("red") : divs[i].classList.remove("red");
   }
}

.red {
  background-color:red;
}

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

If you **don't know what you're doing** avoid the use of `mouseover` and `mouseout`. Use `mouseenter` and `mouseleave` instead. Or rather given the unexplained specific setting - just use CSS `:hover`. — Roko C. Buljan, Oct 16 '22 at 18:13

score 0 · Answer 3 · answered Oct 16 '22 at 18:46

I have added comments in the code below to help you follow what is going on. In my example I use the event.target to get the parent element of the event.target and its sibling div elements. Then you write a conditional that checks if the event.target is equal to the div element queried using its parent element if the current iteration through the loop is not the event.target, we add the class to style the other divs not being targeted, else we have the event.target => we remove the class.

Lastly we loop over the event target types and divs adding the event listener and callback method.

// query the div nodeList
let divs = document.querySelectorAll("div");
// array for the event types
const events = ["mouseover", "mouseout"];

// method for toggling your classes
function toggleClass(e) {
  // get the parentNode of your event.target element and then query the div elements using that parentNode
  // also check that the event.target is not one of the div elements => e.target !== el, 
  // then check the event.type and add/remove class accordingly
  e.target.parentNode.querySelectorAll('div').forEach(el => e.target !== el ?
    e.type === "mouseover" ? el.classList.add('change-bg') : el.classList.remove('change-bg') : null)
}

// loop over events and div elements and pass your callback method
events.forEach(ev => {
  divs.forEach(div => {
    div.addEventListener(ev, toggleClass)
  })
})

.change-bg {
  background-color: green;
  transition: all .3s ease-in-out;
  color: yellow;
}

div {
  margin-top: 5px;
  padding: 5px;
  border: 1px solid black;
}

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

Want to add class when hover the div with Vanilla JavaScript

3 Answers3