“星级评级”CSS驱动我疯狂的错误

我已经构建了一个应用程序，旨在采取星级评级。实际的评级机制是用Javascript和CSS完成的。“星级评级”CSS驱动我疯狂的错误

预期的功能，你将鼠标悬停在星进行选择，然后点击它，将其锁定。

我目前can be seen here什么。老实说，我在智慧的结尾：一切都按照我想要的方式工作，但由于某种原因，只有该明星的前几个像素与悬停在一起工作。

必须有一个对齐问题，但我不能为我的生活弄清楚它是什么。

我希望我能为这一款提供赏金，它一直在困扰我几天 - 如果有人有任何想法，我可以从哪里开始寻找这个愚蠢的小，但我会非常感激。

的星级评定位相关的CSS是：

#star ul.star, #star ul.star0 
{ 
    list-style: none; 
    margin: 0 !important; 
    padding: 0 !important; 
    width: 85px; 
    height: 25px; 
    left: 10px; 
    position: relative; 
    float: left; 
    background: url('media/stars.gif') repeat-x; 
    cursor: pointer; 
} 

#star ul.star0 
{ 
    cursor: default; 
} 

#star li { 
    PADDING: 0 !important; 
    MARGIN: 0 !important; 
    FLOAT: left; 
    DISPLAY: block; 
    WIDTH: 85px; 
    HEIGHT: 25px; 
    TEXT-DECORATION: none; 
    text-indent: -9000px; 
    Z-INDEX: 20; 
    POSITION: absolute; 
    PADDING: 0; } 

#star li.curr { 
    font-size: 1px; 
    background: url(media/stars.gif) 0 25px; 
} 
#star div.user { 
    top: 10px !important; 
    left: 15px !important; 
    position: relative; 
    float: left; 
    font-size: 13px; 
    COLOR: #999; 
}

来源

2010-10-21 palmaceous

只是让你知道：该页面适用于IE浏览器，但不适用于Chrome浏览器 - 如果你的光标不是沿着星星的顶部，没有任何反应 - 所以它们遇到类似的问题。 – egrunin 2010-10-21 14:21:14

我看到的第一件事情是，在reviewscript.js验收高度

 
    oX<1 || oX>84 || oY<0 || oY>19

告诉我，你”只关注上19个像素。您正在使用明星作为页面ULS您链接

 
    <ul id="star1" class="star" ...

但在style.css中，你断言，这些恒星是25个像素高

 
    #star ul.star, #star ul.star0 
    { 
     ... 
    width: 85px; 
    height: 25px; 
     ...

所以自动你忽略鼠标悬停在较低的四分之一的图像。

此外，考虑到星星的行为（在我的Firefox中），我可以开始更改星星评级，并继续更改它，同时在白色星空中围绕星星挥舞，尽可能垂直于0-19范围会导致我期望无论是星形图像在顶部填充了空白还是星形图代码正在将星形绘制得比它应该的低。

来源

2010-10-21 14:38:46

将oY> 19更改为oY> 29似乎已修复了缺陷 – palmaceous 2010-10-21 14:59:24

的主要部分（非常感谢 - 这对我有很大的帮助！） – palmaceous 2010-10-21 14:59:47

“星级评级”CSS驱动我疯狂的错误

回答

相关问题