css - "star rating"CSS 错误让我抓狂

Question

我构建了一个应用程序，旨在进行星级评定。实际的评级机制是用 Javascript 和 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;
}

Answer 1

我第一眼看到reviewscript.js中的acceptance height是

    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 范围会导致我期望星星图像顶部用空白填充，或者您正在绘制星星的代码将星星绘制得比预期的要低。