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

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