I want to change class of all element which are on the right of the hovered (including) and on the left of the hovered.
HTML:
<div id="head_1" class="left_head active"></div>
<div id="head_2" class="middle_head active"></div>
<div id="head_3" class="middle_head active"></div>
<div id="head_4" class="middle_head inactive"></div>
<div id="head_5" class="middle_head inactive"></div>
This is how it looks like:
Now, when I hover over third head I want all heads on the left to change class from inactive to active, and all of them on the right from active to inactive (if they were previously active)
$("div").hover(
function () {
$(this).addClass("active");
$(this).prevAll().addClass("active");
},
function () {
$(this).removeClass("active");
$(this).prevAll().removeClass("active");
}
);
div {
width: 20px;
height: 20px;
display: inline-block;
background-color: grey;
border: 1px solid black;
margin: 5px;
}
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments