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,提示框嘛,总得有框的样子