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>
Here’s a more general version using vanilla javascript, with comments:
You can add
data-*
attribute to each div and specify color for that div . Then , whenever yourinner-box
gets hover get thatdata-attribute
value and use same to apply changes .Demo Code :