.jRatingColor {
background-color:#f4c239; /* bgcolor of the stars*/
position:relative; //相对定位
top:0;
left:0;
z-index:2; //这里需注意，该div的祖先即我们each函数中的this 的z-index是1，下面我们将马上看到。
height:100%;
}
第二个<div>样式表如下：
复制代码 代码如下:
.jRatingAverage {
background-color:#f62929; //红色
position:relative;
top:0;
left:0;
z-index:2;
height:100%;
}
但在上面的程序中，初始化时，把宽度设为0（因为鼠标还没选嘛），同时改变了top值：- 星高度，这样它就和上面添加的div在纵方向上重合了。
接下来看第三个<div>,主要用来放小星星。
复制代码 代码如下:
/** Div containing the stars **/
.jStar {
position:relative;
left:0;
z-index:3;
}
这个样式表比较简单，我们着重看一下JS中动态添加的几个属性值：
复制代码 代码如下:
width:widthRatingContainer, //设置宽度
height:starHeight, //高度
top:- (starHeight*2), //改变纵方向的值，和上面两个<div>重合
background: 'url('+bgPath+') repeat-x' //设置背景为小星星
属性的值设置了，但也许有人会问，问什么只看到小星星颜色是彩色的，而上面添加的前两个<div>不是具有高度的长方形颜色条吗？下面我们看一下小星星的图片就明白为什么了！
不用多说，旁边用不透明的背景，中间小星星是透明的，下面的颜色自然就显示出来了！！
接下来的语句很简单，就是设置一下最外层div容器的样式，注意z-Index属性:
复制代码 代码如下:
$(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
接下来会进入相对复杂的部分，我们将关注鼠标动作及其响应效果，首先关注一个小逻辑：
if(!jDisabled)
//接下来的代码
可以看出，前面我们设置的jDisable变量在这里用上了，如果jDisabled为true，就表示插件禁用了，那么接下来的鼠标操作将不会被执行。
接下来看鼠标操作是如何添加到插件中的：
$(this).unbind().bind({//鼠标事件处理代码，下面将分别进行讨论。
}）;
首先看以一下鼠标进入事件处理代码：
复制代码 代码如下:
mouseenter : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft; //首先计算出relativeX，它表示的是鼠标相对于外层<div>左边界的横向距离
if (opts.showRateInfo)
var tooltip =
$('<p>',{
'class' : 'jRatingInfos',
html : getNote(relativeX)+' <span>/ '+opts.rateMax+'</span>', //注意这里用了getNote方法，前面已讲了它的用途。
css : {
top: (e.pageY + opts.rateInfosY),
left: (e.pageX + opts.rateInfosX)
}
}).appendTo('body').show();
},
relativeX变量不多解释，这里的注释和前面都有提到，接下来，判断showRateInfo参数是否为true,如果为true，表示要显示比例信息（例如鼠标下面显示16/20），tooltip变量就是这个信息框，最后通过appendTo方法添加到body中。代码逻辑很简单，这个函数主要用来显示提示框<p>，我们在这里可以重点关注一下<p>节点的样式，它是绝对定位的，并利用代码改变了top和Left值，看一下相关的样式表：
复制代码 代码如下:
p.jRatingInfos {
position: absolute;
z-index:9999;
background: transparent url('http://www.cnblogs.com/icons/bg_jRatingInfos.png') no-repeat;
color: #FFF;
display: none;
width: 91px;
height: 29px;
font-size:16px;
text-align:center;
padding-top:5px;
}
p.jRatingInfos span.maxRate {
color:#c9c9c9;
font-size:14px;
}
接下来我们看一下鼠标进来后的mousemove事件的处理函数：
复制代码 代码如下: