Want to add class when hover the div with Vanilla JavaScript-CodePudding

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>

CodePudding user response：

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 >
  <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 >
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CodePudding user response：

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>

CodePudding user response：

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>