Change the class of multiple elements

Question

I want to change the class of all elements that are to the right of the hover (including) and to the left of the hover.

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>

Here's what it looks like:

Now that I'm above the third head, I want all the chapters on the left to change the class from inactive to active, and all of them to the right from active to inactive (if they were previously active)

Answer 1

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

Run codeHide result

Answer 2

.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

<div class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</div>
  

Run codeHide result

Answer 3

jQuery, mouseenter:

$('.head').on('mouseenter', function () {
  
  console.log(head);
  
  var head = this;
  var off;
  
  $('.head').each (function () {
    
    $(this).toggleClass('active', !off);
    
    if ($(this).get(0) == head)
      off = true;
    
  });
});

.head {
  
  display: inline-block;

  width: 40px;
  height: 40px;
  
  background-color: green;
  
}

.head.active {

  background-color: red;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="head_1" class="head"></div>
<div id="head_2" class="head"></div>
<div id="head_3" class="head"></div>
<div id="head_4" class="head"></div>
<div id="head_5" class="head"></div>

Hide result

Answer 4

CSS , .

.container{
    width: 200px;
}
.middle_head{
    height:15px;
	width:15px;
	border-radius:50%;
	border: 1px solid #000;
	float: right;
	margin-right:3px;
}
	
.middle_head:hover,.middle_head:hover~.middle_head{
    background-color: #000;
}

<div class="container">
    <div id="head_1" class="middle_head"></div>
    <div id="head_2" class="middle_head"></div>
    <div id="head_3" class="middle_head"></div>
    <div id="head_4" class="middle_head"></div>
    <div id="head_5" class="middle_head"></div>
</div>

Hide result

Answer 5

css :hover

div {
  width: 50px;
  height: 50px;
  padding: 10px;
  background: red;
  display: inline-block;
  position: relative;
}

section div:hover, section:hover div {
  cursor: wait;
  background: green;
}

section div:hover ~ div {
  background: red;
}

<section>
  <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>
</section>

Hide result