// source http://jsbin.com/bacohuz

index.html

<style id="jsbin-css">
ul {
  list-style-type: none;
  padding: 0;
  display: inline-flex;
  font-size: 50px;
  outline: 1px solid red;
  width: 5em;
  overflow: hidden;
}
ul:hover {
  outline: 2px solid blue;
}
ul:hover > li:nth-child(1) {
  margin-left: -5em;
}
li:before {
  content: "★";
}
li:nth-child(1) {
  margin-left: 0em;
}
li:nth-last-child(n+5) {
  color: gray;
}
li:nth-last-child(-1n+5) {
  color: red;
}
li:nth-last-child(-1n+5):hover ~ * {
  color: yellow;
}
</style>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

<script id="jsbin-source-css" type="text/css">ul {
	list-style-type: none;
	padding:0;
	display: inline-flex;
	font-size: 50px;
	outline: 1px solid red;
	width: 5em;
	overflow: hidden;
	
	&:hover {
		outline: 2px solid blue;
		
		&>li:nth-child(1) {
			margin-left: -5em;
		}
	}
}
li {
	&:before {
		content: "★";
	}
	&:nth-child(1) {
		margin-left: 0em;
	}
	&:nth-last-child(n+5) {
		color: gray;
	}
	
	&:nth-last-child(-1n+5) {
		color: red;
	
		&:hover ~ * {
			color: yellow;
		}
	}
}
</script>

jsbin.bacohuz.css

ul {
  list-style-type: none;
  padding: 0;
  display: inline-flex;
  font-size: 50px;
  outline: 1px solid red;
  width: 5em;
  overflow: hidden;
}
ul:hover {
  outline: 2px solid blue;
}
ul:hover > li:nth-child(1) {
  margin-left: -5em;
}
li:before {
  content: "★";
}
li:nth-child(1) {
  margin-left: 0em;
}
li:nth-last-child(n+5) {
  color: gray;
}
li:nth-last-child(-1n+5) {
  color: red;
}
li:nth-last-child(-1n+5):hover ~ * {
  color: yellow;
}