Change class of multiple elements

Croolman

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:

The look of the situation

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)

Federico Govoni

$("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.

edited at
0

Comments

0 comments
Login to comment

Related

Change the classname of multiple elements of a class

On hover change multiple elements

Multiple elements with same class

Detect change in multiple class

Change class of list of li elements

Change class of elements in a list and loop

SelectInput to change multiple elements in Shiny

How to check the on change event in multiple elements with same class name in Rails using Jquery

How do I change multiple elements with the same class to a list of array items

Get elements by class name and change class name

toggle class on multiple elements react

Combine multiple elements by class in jQuery

Multiple Array elements to Class Object

Jquery Remove Class Multiple Elements

ToggleClass on multiple elements with similar class

Condition if multiple elements have a class

Adding class to multiple elements with the same class

Change the CSS of a multiple div class

Reversing an array in a class does not change the order of the elements

JavaScript efficient style change on the entire class of elements

Change id for all elements having a class

How to change class of individual elements inside ngfor?

Change all <p> elements with a class to <code>

How to change the class of elements that have matching content

Change multiple Matrix elements by Index Vectors

Change attribute of multiple elements on hover by using CSS

Using querySelectorAll to change the style property of multiple elements

Javascript: toggle change content of multiple elements

Simplest way to change multiple elements in a Seq in Scala