How to find same name all class on single class hover?

Question

In below code snippet i want to find same name class on single box on hover.

Currently, i do jQuery code for all in separate but i want general jQuery code because color box can be more like Pink, Yellow etc.

SO please help me to add general code for this.

In short i want to find same name all class on single box hover.

jQuery('.red-box').hover(function (){
  jQuery('.inner-box').removeClass('active');
  jQuery('.red-box').addClass('active');
});
jQuery('.blue-box').hover(function (){
  jQuery('.inner-box').removeClass('active');
  jQuery('.blue-box').addClass('active');
});
jQuery('.green-box').hover(function (){
  jQuery('.inner-box').removeClass('active');
  jQuery('.green-box').addClass('active');
});

.inner-box {
            height: 100px;
            width: 100px;
            border: 2px solid #000000;
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .blue-box.active {
            background-color: blue;
        }

        .red-box.active {
            background-color: red;
        }

        .green-box.active {
            background-color: green;
        }



        Red
        Blue
        Green
        Red
        Blue
        Red
        Green
        Blue

user_10606400 · Answer

You can add data-* attribute to each div and specify color for that div . Then , whenever your inner-box gets hover get that data-attribute value and use same to apply changes .

Demo Code :

jQuery('.inner-box').hover(function() {
  var data_color = $(this).data('color');
  jQuery('.inner-box').removeClass('active');
  jQuery('[data-color=' + data_color + ']').addClass('active');
});

.inner-box {
  height: 100px;
  width: 100px;
  border: 2px solid #000000;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue-box.active {
  background-color: blue;
}

.red-box.active {
  background-color: red;
}

.green-box.active {
  background-color: green;
}



  Red
  Blue
  Green
  Red
  Blue
  Red
  Green
  Blue

user_10289265 · Answer

Here's a more general version using vanilla javascript, with comments:

// get all inner boxes
const boxes = [...document.querySelectorAll('.inner-box')];

boxes.forEach(box => {
  // add a mouseover listener to all inner boxes
  box.addEventListener('mouseover', () => {
  
    // find the class name of the current hovering box other than `inner-box`
    const boxName = [...box.classList].find(cls => cls !== 'inner-box');
    
    // disable all "active" class from all inner boxes
    boxes.forEach(box => box.classList.remove('active'));
    
    // add "active" class to all boxes that share the same class name with the current hovering box
    // e.g. "red-box"
    [...document.getElementsByClassName(boxName)].forEach(box => box.classList.add('active'));
  });
});

.inner-box {
    height: 100px;
    width: 100px;
    border: 2px solid #000000;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blue-box.active {
    background-color: blue;
}

.red-box.active {
    background-color: red;
}

.green-box.active {
    background-color: green;
}


    Red
    Blue
    Green
    Red
    Blue
    Red
    Green
    Blue

user_10126770 · Answer

On hover, first add the active class. And then, check for the siblings of the current element who has same class and then add active to those elements too.

jQuery(".inner-box").hover(function(){ 
$(this)[0].classList.add("active");
var classList = $(this)[0].classList; // returns inner-box, red-box or blue-box
var siblings = $(this).siblings();
$(siblings).each(function(index,elem){
   if($(elem).hasClass(classList[1])){ // check if other elements have the same class as of the current element and add active.
     $(this)[0].classList.add("active");
   }else{
     $(this)[0].classList.remove("active");
   }
  })
});

.inner-box {
            height: 100px;
            width: 100px;
            border: 2px solid #000000;
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .blue-box.active {
            background-color: blue;
        }

        .red-box.active {
            background-color: red;
        }

        .green-box.active {
            background-color: green;
        }



        Red
        Blue
        Green
        Red
        Blue
        Red
        Green
        Blue

How to find same name all class on single class hover?

3 Answers