记事本

闲来无事，想做一个星级评价系统的UI，又不想用JavaScript。分析一下，只能从:hover这个伪类入手，但是IE6除了a标签，别的标签都不支持:hover伪类。所以问题就限定在怎么样用a标签来实现星级评价。

假设星级评价有5个等级，每个星星有20象素的高度和宽度。

最初的想法是用嵌套的方式去实现，但a标签是不能嵌套使用的。所以又想到了重叠的方式，比如等级5是100象素的宽度，等级4是80个象素，并且覆盖到等级5的上面。等级3是60个象素，覆盖到等级4的上面。以此类推，并且把这5个a标签左对齐，设置一下hover时的背景图片就搞定了。

CSS代码：

#rating {
  position: relative;
}
#rating a {
  display: block;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
}
#rating a:hover {
  background: red;
}
#rank5 {
  width: 100px;
}
/* 每个rank都要设置宽度，很麻烦。省略不写了。 */

HTML代码：

<div id="rating">
  <a id="rank5" href="#"></a>
  <a id="rank4" href="#"></a>
  <a id="rank3" href="#"></a>
  <a id="rank2" href="#"></a>
  <a id="rank1" href="#"></a>
</div>

但是这样很麻烦，每个等级的a标签都要设置宽度。那么就结合一下嵌套和重叠的方法，每个等级再加入div标签做嵌套，实现自动适应宽度。

CSS代码：

#rating {
  width: 100px;
  height: 20px;
  background: transparent url(star_rating.gif) repeat;
}
#rating div {
  margin-right: 20px;
}
#rating, #rating div
{
  zoom: 1; /* 如果不加这个，在IE6,7下你会很纠结 */
  position: relative;
}
#rating a {
  position: absolute;
  height: 20px;
  width: 100%;
}
#rating a:hover {
  background: transparent url(star_rating.gif) repeat;
  background-position: 0 -20px;
}

HTML代码：

<div id="rating">
  <a href="#"></a>
  <div>
    <a href="#"></a>
    <div>
      <a href="#"></a>
      <div>
        <a href="#"></a>
        <div>
          <a href="#"></a>
        </div>
      </div>
    </div>
  </div>
</div>

解释一下，#rating这个div是等级5的容器，设定它的宽度为100象素，这时候它里面的div也都是宽100象素。然后它里面的div分别向右间隔20个象素，这样就变成了宽100px，80px，60px，40px和20px的五个div。再让a标签绝对定位重叠起来，并且让它们和容器一样的大小。设置好背景图片之后，一个星级评价的UI就完成了。

点我查看完整的演示