「星級評級」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驅動我瘋狂的錯誤

回答

相關問題