How to change star rating color on mouseenter, on mouseout, and on onclick


Joined
Sep 28, 2018
Messages
1
Reaction score
0
When I mouseenter on stars from a li tag/list class, all stars from every list class is showing me stars as mouseentered. I want that to be changed. When I mouseenter on stars from a li tag/list class it should show me orange stars. Means if I mouseenter on 1 star it should show me 1 orange star. if 2, then 2 orange stars.

onmouseout the ratings should show me the rating as server rated count. Change anything in mouseenterrating function and in clearstar function if you need(I mean how a rating system should work on mouseenter and on mouseout you will need to change it that way.). And I need javascript code with ajax for onclick also(Not jQuery).

-----------------------------------------------------------------------------------------------------------------------------------

Here is the code:

Code:
<?php

require "conx.php";

$sql = "SELECT * FROM customers ORDER BY id ASC";

$query = $conx -> query($sql);

$numrows = $query -> num_rows;

?>

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="css/font-awesome.min.css">

<link rel="stylesheet" href="style.css">

<script src="jquery.min.js"></script>

<body>

<div class="Insert-Into">

<ul>

<?php if($numrows > 0): ?>

<?php while($row = $query -> fetch_assoc()): ?>

<?php $rating = $row["rating"]; ?>

<li data-rating=<?php echo "$rating"; ?> data-id=<?php echo $row['id']; ?> class="list">

<br/>
<br/>

<span class="username"><?php echo $row["username"]; ?></span>

<br/>
<br/>

<?php

$i;

$color;

for($i = 1; $i <= 5; $i++){
   
    if($i <= $rating){
       
        $color = "color:orange";
       
    }
    else{
       
        $color = "color:#ccc";
       
    }
   
    echo "<i class='fa fa-star' style='$color;' onmouseenter='mouseenterrating($i)' data-rating='$i' onmouseout='clearstar($i)'></i>";
}

?>

<br/>
<br/>

<b>Description</b>

<br/>
<br/>

<div class="desc"><?php echo $row["description"]; ?></div>

</li>

<?php endwhile; ?>

<?php endif; ?>

</ul>

</div>

<script>
function mouseenterrating(rating){
   
    var i, j, k, l, m;
   
    var list = document.getElementsByClassName("list");
   
    for(i = 0; i < list.length; i++){
               
        var fa = list[i].getElementsByClassName("fa");
       
            for(j = 0; j < fa.length; j++){
               
                var value = fa[j].dataset.rating;
                                           
                    if(value <= rating){
                       
                        fa[j].style.color = "orange";
                       
                    }
                    else{
                       
                        fa[j].style.color = "#ccc";
                       
                    }

            }
   
   
   
    }
   
}

function clearstar(rating){
   
    var fa = document.getElementsByClassName("fa");
   
    var k;
   
    for(k = 0; k < fa.length; k++){
       
        var value = fa[k].dataset.rating;
               
            fa[k].style.color = "#ccc";
       
    }
   
}
</script>

</body>

</html>

Code:
.fa{
    font-size:25px;
   }
   
.fa:hover{
          color:blue; 
        }   
   
li{
  list-style:none;
  padding-left:40px;
  padding-bottom:40px;
  border-bottom:2px solid #ccc;
  width:800px;
 }

li:last-child{
             border-bottom:none;
            }

Code:
<?php

$conx = mysqli_connect("localhost", "root", "");

if(!$conx){
   
    echo "Not connected with localhost";
   
}

$sql = "CREATE DATABASE rating";

$query = $conx -> query($sql);

$dbselect = $conx -> select_db("rating");

if(!$dbselect){
   
    echo "No database selected";
   
}

$sql = "CREATE TABLE customers(id INT(255) NOT NULL AUTO_INCREMENT UNIQUE KEY, username VARCHAR(200) NOT NULL, description VARCHAR(1000) NOT NULL, email VARCHAR(200) NOT NULL PRIMARY KEY, rating INT(5) NOT NULL)";

$query = $conx -> query($sql);

?>
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top