Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<body>
<div class="Insert-Into">
<ul>
<li data-rating="foo-rating" data-id="someid" class="list">
<br/>
<br/>
<span class="username"></span>
<br/>
<br/>
  <i class="fa fa-star" style="color:#ccc" onmouseenter="onMouseEnter(1)" onmouseout="onMouseOut()"></i>
  <i class="fa fa-star" style="color:#ccc" onmouseenter="onMouseEnter(2)" onmouseout="onMouseOut()"></i>
  <i class="fa fa-star" style="color:#ccc" onmouseenter="onMouseEnter(3)" onmouseout="onMouseOut()"></i>
  <i class="fa fa-star" style="color:#ccc" onmouseenter="onMouseEnter(4)" onmouseout="onMouseOut()"></i>
  <i class="fa fa-star" style="color:#ccc" onmouseenter="onMouseEnter(5)" onmouseout="onMouseOut()"></i>
<br/>
<br/>
<b>Description</b>
<br/>
<br/>
<div class="desc"></div>
</li>
</ul>
</div>
<script>
function onMouseEnter(index){
  var fa = document.getElementsByClassName("fa");
  var j;
  for(j = 0; j < fa.length; j++){
    if(j < index){
      fa[j].style.color = "orange";
    }
    else{
      fa[j].style.color = "#ccc";
    }
  }
}
function onMouseOut(){
  var fa = document.getElementsByClassName("fa");
  var k;
  for(k = 0; k < fa.length; k++){
    fa[k].style.color = "#ccc";
  }
}
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers