¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse pase sobre cada círculo se rellene hasta donde lo pongo.
Es decir, tengo 5 circulos, si pongo el mouse en el tercer círculo, me gustaría que se rellenará de un color hasta el tercero. Si lo pongo en el primer círculo, que se rellene solo el primero y así...
Aún no logro como hacerlo, les dejo un ejemplo más claro de lo que me gustaría que hiciera en el siguiente enlace, clic aquí.
$(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>