CODEWITHSUNDEEP
css
DonLeo
DonLeo

Reputation: 355

CSS hover on the elements before

I want to create star rating by CSS. When user will hover last star, all stars before that star must have another color, e.g.: I will hover minStar3, then minStar1,minStar2 and minStar3 must have different color.

<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>

Upvotes: 4

Views: 2322

Answers (5)

Joel
Joel

Reputation: 15

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star rating 2</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container">
<fieldset class="rating" id="rating">


<input type="radio" id="hidden" checked />

<input type="radio" id="star1" name="rating" value="1" class=""/>
<label for="star1" id="star1_l" class="full" title="1 star"><i class="bi bi-star-fill"></i></label>

<input type="radio" id="star2" name="rating" value="2"/>
<label for="star2" id="star2_l"  class="full" title="2 stars"><i class="bi bi-star-fill"></i></label>

<input type="radio" id="star3" name="rating" value="3"/>
<label for="star3" id="star3_l"  class="full" title="3 stars"><i class="bi bi-star-fill"></i></label>

<input type="radio" id="star4" name="rating" value="4"/>
<label for="star4" id="star4_l"  class="full" title="4 stars"><i class="bi bi-star-fill"></i></label>

<input type="radio" id="star5" name="rating" value="5"/>
<label for="star5" id="star5_l"  class="full" title="5 stars"><i class="bi bi-star-fill"></i></label>

</fieldset> 

<div id="rating"><h4 id="rating-value"></h4></div>

<script src="star-ratings.js"></script>
</body>
</html>

style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,body{
width: 100%;
height: 100%;
}

body{
font-family: Arial, sans-serif;
}

.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: #e9f6ef;

}

#rating-value {

width: 110px;
min-height: 45px;
margin: 40px auto 0;
padding: 10px 5px;
text-align: center;
box-shadow: inset 0 0 2px 1px rgba(46,204,113,.2);
border: 2px solid green;
}


.rating{
width: 300px;
margin: 0 auto;
border: none;
cursor: pointer;

display: flex;
align-items: center;
justify-content: center;


}

.rating > input{
display: none;
}


.rating >  label {
color: #b3bbeb;
font-size: 30px;
padding: 7px;
cursor: pointer;
}


.rating:hover label:not(label:hover ~ label){
color: green;  

}

label:hover ~ label {
color: #b3bbeb;   

}


input:checked + label {

color: #58e060;   

}

.rating > label:not(input:checked ~ label) {
color: #58e060;   


}

.rating > input:checked ~ label:hover ~ label{
 
color: #b3bbeb;

}

star-ratings.js

let star = document.querySelectorAll('input');
let showValue = document.querySelector('#rating-value');

for (let i = 0; i < star.length; i++) {
star[i].addEventListener('click', function() {
    i = this.value;
    const element = document.getElementById("hidden");
    element.remove();
    showValue.innerHTML = i + " out of 5";
});
}

Upvotes: 0

Joel
Joel

Reputation: 15

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star rating 3</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
    <div class="container">
        
        <fieldset class="rating" id="rating">
            
            
            <input type="radio" id="star5" name="rating" value="5"/>
            <label for="star5" id="star5_l  class="full" title="5 stars"><i class="bi bi-star-fill"></i></label>
            
            <input type="radio" id="star4" name="rating" value="4"/>
            <label for="star4" id="star4_l  class="full" title="4 stars"><i class="bi bi-star-fill"></i></label>
            
            <input type="radio" id="star3" name="rating" value="3"/>
            <label for="star3" id="star3_l  class="full" title="3 stars"><i class="bi bi-star-fill"></i></label>
            
            <input type="radio" id="star2" name="rating" value="2"/>
            <label for="star2" id="star2_l  class="full" title="2 stars"><i class="bi bi-star-fill"></i></label>
            
            <input type="radio" id="star1" name="rating" value="1"/>
            <label for="star1" id="star1_l class="full" title="1 star"><i class="bi bi-star-fill"></i></label>
            
            
        </fieldset>
        
        <div id="rating"><h4 id="rating-value"></h4></div>
        
        <script src="star-ratings.js"></script>
    </body>
</html>

style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,body {
width: 100%;
height: 100%;
}

body {
font-family: Arial, sans-serif;
}

.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: #e9f6ef;


}



#rating-value{  
width: 110px;
min-height: 45px;
margin: 40px auto 0;
padding: 10px 5px;
text-align: center;
box-shadow: inset 0 0 2px 1px rgba(46,204,113,.2);
border: 2px solid green;
}


.rating{

width: 235px;
margin: 0 auto;
border: none;
cursor: pointer;

border: 2px solid green;

}

.rating > input{
display: none;
}


.rating > label {
color: #b3bbeb;
font-size: 30px;
padding: 7px;
cursor: pointer;
float: right;



}


.rating label {
color: #b3bbeb;  


}



.rating label:hover,
.rating:not(:checked) label:hover ~label,
.rating  input:checked  + label:hover,
.rating  input:checked  ~ label:hover  {
color: #1be51f;    

}



.rating input:checked + label,
.rating  input:checked  ~ label  {


color: #15b318; 


}

star-rating.js

let star = document.querySelectorAll('input');
let showValue = document.querySelector('#rating-value');

for (let i = 0; i < star.length; i++) {
star[i].addEventListener('click', function() {
    i = this.value;

    showValue.innerHTML = i + " out of 5";
});
}

Upvotes: 0

Pierre Fiorelli
Pierre Fiorelli

Reputation: 129

I know it's an old thread but I found an easiest way to do a star rating only in css. If the parent element is hovered I fill all the stars. Then I empty all the stars next to the focused star:

.container {
    pointer-events: none;
}

.container .star{
    pointer-events: auto;
    color:grey;
}

.container:hover .star{
    color:yellow;
}

.container .star:hover ~ .star{
    color:grey;
}

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I have seen this trick before here on SO, but can't find it back.

To do so, invert the order of the stars.
Wrap them in an element (like a p or a div)
Give that wrapper direction: rtl.

By inverting the direction, the ~ sibling selector can be used.

i {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: green;
}

p {
  text-align: left;
  direction: rtl;
}
p>i:hover,
p>i:hover~i {
  background: red;
}
<p>
  <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true">5</i>
  <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true">4</i>
  <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true">3</i>
  <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true">2</i>
  <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true">1</i>
</p>

Upvotes: 6

Nenad Vracar
Nenad Vracar

Reputation: 122047

You could create this with Flexbox and change order of elements with flex-direction: row-reverse. You can also use ~ general sibling selector to select all sibling elements that come after hovered element .

.rating {
  display: inline-flex;
  flex-direction: row-reverse;
}
i {
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid black;
  transition: all 0.3s ease-in;
}
i:hover ~ i,
i:hover {
  background: black;
}
<div class="rating">
  <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>
</div>

Upvotes: 11

Related Questions