"on hover"
Bootstrap 4.0.0 Snippet by lavan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .checked { background: orange; color:#fff; } </style> </head> <body> <div> <table class="table table-bordered"> <tr><td class="item" id="star5" onmouseover="add(this,5)">1</td></tr> <tr><td class="item" id="star4" onmouseover="add(this,4)">2</td></tr> <tr><td class="item" id="star3" onmouseover="add(this,3)">3</td></tr> <tr><td class="item" id="star2" onmouseover="add(this,2)">4</td></tr> <tr><td class="item" id="star1" onmouseover="add(this,1)">5</td></tr> </table> </div> <script> function add(ths,sno){ for (var i=1;i<=5;i++){ var cur=document.getElementById("star"+i) cur.className="item" } for (var i=1;i<=sno;i++){ var cur=document.getElementById("star"+i) if(cur.className=="item") { cur.className="item checked" } } } </script> </body> </html>

Related: See More

Vue Paper Dashboard 2 PRO
Hover Effect Style
Different types of hover and transition effect.
Owl Carousel Arrows on hover

Questions / Comments: