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>

Leave a Comment