Home / Questions / 23227
Accepted
Hoose
Asked: 2020-09-10 17:31:46 +0800 CST 2020-09-10 17:31:46 +0800 CST

How to fill each circle when hovering over it?

  • 772

Hello! I'm practicing jQuery, and I would like to be able to do like a ranking. What I want to get to is that each time the mouse passes over each circle it fills up to where I put it.

That is, I have 5 circles, if I put the mouse on the third circle, I would like it to be filled with a color up to the third. If I put it in the first circle, only the first one will be filled and so on...

I still don't know how to do it, I leave you a clearer example of what I would like you to do in the following link, click here .

$(function () {
	$('.rating-circle').mouseover(function(){
		$('.rating-circle').addClass('rating-hover');
	}).mouseleave(function(){
		$('.rating-circle').removeClass('rating-hover');
	});
});
body {
	   font-family: Verdana;
	  }
	  h1, h2, h3 {
	   color: darkblue;
	  }
	  .rating-circle {
	   height: 2em;
	   width: 2em;
	   border: .1em solid black;
	   border-radius: 1.1em;
	   display: inline-block;
	   margin: 0;
	   padding: .1em;
	  }

	  .rating-hover {
	   background-color: yellow;
	  }

	  .rating-chosen {
	   background-color: green;
	  }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Piedra, Papel o Tijera :)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
	<div class="container">
        <h1 class="page-header">Rating</h1>
		<div id="rating-container">
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
	 	</div>
	</div>
</body>
</html>

javascript

2 Answers

  1. Best Answer

    The easiest way with jquery and the code you have is using prevAll()and addBack(), whereby:

    • .prevAll() finds the previous elements in the DOM, at the same level as the element or selector.
    • .addBack() "calls" the previous element selected by a DOM traversal, adding it to the current collection. In this case it allows to add the current element, for which the search starts$(this)

    $(function () {
	$('.rating-circle').mouseover(function(){
		$(this).prevAll().addBack().addClass('rating-hover');
	}).mouseleave(function(){
		$(this).prevAll().addBack().removeClass('rating-hover');
	});
});
    body {
	   font-family: Verdana;
	  }
	  h1, h2, h3 {
	   color: darkblue;
	  }
	  .rating-circle {
	   height: 2em;
	   width: 2em;
	   border: .1em solid black;
	   border-radius: 1.1em;
	   display: inline-block;
	   margin: 0;
	   padding: .1em;
	  }

	  .rating-hover {
	   background-color: yellow;
	  }

	  .rating-chosen {
	   background-color: green;
	  }
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Piedra, Papel o Tijera :)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
	<div class="container">
        <h1 class="page-header">Rating</h1>
		<div id="rating-container">
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
	 	</div>
	</div>
</body>
</html>

    • 2

  2. Using jQuery's prev function , you can create a recursive function in which you send the object that receives the mouseover action and then look for the previous element that matches the same selector.

    $(function() {
  $('.rating-circle')
    .mouseover(function() {
      rellenar(this);
    })
    .mouseleave(function() {
      vaciar(this);
    });
});

function rellenar(objDiv) {
  $(objDiv).addClass("rating-hover");
  rellenar($(objDiv).prev(".rating-circle"));
}

function vaciar(objDiv) {
  $(objDiv).removeClass("rating-hover");
  vaciar($(objDiv).prev(".rating-circle"));
}
    h1,
h2,
h3 {
  color: darkblue;
}
.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
.rating-hover {
  background-color: yellow;
}
.rating-chosen {
  background-color: green;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="page-header">Rating</h1>
  <div id="rating-container">
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
  </div>
</div>

    • 1