html+css+js实现类淘宝星级宝贝评价系统

1.先上效果图

鼠标悬浮效果

鼠标点击效果

点击后把鼠标移开依旧会恢复上次的评分

2.准备部分

    1.提示框倒三角的实现

    看这张图片

颜色比较丑。我们实现很多地方都要用到这种气泡型的东西，倒三角是它的实现思路。我们怎么制作一个倒三角呢？？用css background的话要加载图片，是不利于网站优化的.我这里用到的办法是采用css border来实现的。

继续看这张图片 它的代码长成这个样子,就是一个单纯的DIV

              .triangle{
			width: 30px;
			height: 30px;
			border-style: solid;
			border-width: 20px;
			border-color:crimson steelblue lightgreen pink;
		}

原来就是四方枭雄想争夺都想问鼎，你不让我我不让你，但是达成了一个领土共识，所以各自形成了梯形。皇帝虽羸弱，但毕竟还是龙，一日不死各路枭雄的敌人就会多一个。

来，我们让皇帝死。

             .triangle{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:crimson steelblue lightgreen pink;
		}

啪，皇帝驾崩

看来时事造就英雄啊，绿党貌似掌握了大权

          .triangle{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:transparent transparent lightgreen transparent;
		}

回到正题，我们为绿党造一个父DIV，提示框嘛，总得有框的样子