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中的接受高度是

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

告诉我你只关注上面的19个像素。您在链接的页面中使用星号作为符号

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

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

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

因此，您会自动忽略图像下四分之一的鼠标悬停。

另外，考虑到星星的行为（在我的火狐中），我可以开始改变星级评分并继续改变它，同时在围绕星星的白色空间中挥手，沿着0-19范围垂直移动会让我期待明星图像在顶部用白色空间填充，或者你的星形图代码正在吸引明星低于它应该的位置。

“星级”CSS bug让我发疯

1 个答案: