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

by

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;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-wrapper">
        <div class="inner-box red-box">Red</div>
        <div class="inner-box blue-box">Blue</div>
        <div class="inner-box green-box">Green</div>
        <div class="inner-box red-box">Red</div>
        <div class="inner-box blue-box">Blue</div>
        <div class="inner-box red-box">Red</div>
        <div class="inner-box green-box">Green</div>
        <div class="inner-box blue-box">Blue</div>
    </div>

2 thoughts on “How to find same name all class on single class hover?”

  1. 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;
}
    <div class="box-wrapper">
    <div class="inner-box red-box">Red</div>
    <div class="inner-box blue-box">Blue</div>
    <div class="inner-box green-box">Green</div>
    <div class="inner-box red-box">Red</div>
    <div class="inner-box blue-box">Blue</div>
    <div class="inner-box red-box">Red</div>
    <div class="inner-box green-box">Green</div>
    <div class="inner-box blue-box">Blue</div>
</div>
    Reply

  2. 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;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-wrapper">
  <div class="inner-box red-box" data-color="red">Red</div>
  <div class="inner-box blue-box" data-color="blue">Blue</div>
  <div class="inner-box green-box" data-color="green">Green</div>
  <div class="inner-box red-box" data-color="red">Red</div>
  <div class="inner-box blue-box" data-color="blue">Blue</div>
  <div class="inner-box red-box" data-color="red">Red</div>
  <div class="inner-box green-box" data-color="green">Green</div>
  <div class="inner-box blue-box" data-color="blue">Blue</div>
</div>
    Reply

Leave a Comment