用於星級評分系統的CSS

Question

我試圖創建一個5星級系統，顯示您懸停的星星數量。

所以，有一個背景，它具有分的寬度，然後在它前面有具有5個不同的彩色星星的相同形狀的div，這個div默認的寬度爲0。

當一個人將光標懸停在寬度上時，通過適當調整寬度顯示第二個背景。

我不能得到這個工作，這是我的小提琴：http://jsfiddle.net/AAgU9/

我的HTML是：

<div style="position:relative"> 
    <div class="stb"></div> 
    <div class="stf"></div> 
    <div class="sts st1"></div> 
    <div class="sts st2"></div> 
    <div class="sts st3"></div> 
    <div class="sts st4"></div> 
    <div class="sts st5"></div> 
</div> 

我的CSS是：

.stb{ 
    background:red; 
    width:140px; 
    height:27px; 
    cursor:pointer} 
.stf{ 
    position:absolute; 
    width:0; 
    height:27px; 
    top:0; 
    left:0; 
    background:green 0 -26px; 
    cursor:pointer} 
.sts{ 
    position:absolute; 
    width:28px; 
    height:27px; 
    top:0; 
    cursor:pointer; 
    z-index:2} 
.st1{left:0} 
.st2{left:28px} 
.st3{left:56px} 
.st4{left:84px} 
.st5{left:112px} 
.st1:hover .stf{background:red} 
.st2:hover .stf{width:56px} 
.st3:hover .stf{width:84px} 
.st4:hover .stf{width:112px} 
.st5:hover .stf{width:140px} 

我在做什麼錯？

Answer 1

我想你想要這樣的：http://jsfiddle.net/AAgU9/4/

您使用您的選擇不正確。 .st1:hover .stf將針對.st1:hover的後代作爲stf的類別的後代。你沒有這樣的元素。

相反，你想看看兄弟姐妹，特別是，要使用~它的目標而來的一些元素之後，這意味着像#someElem ~ div會選擇所有都是#someElem兄弟姐妹也來了後div元素的兄弟姐妹。

所以，只要重新整理你的HTML：

<div style="position:relative"> 
    <div class="stb"></div> 
    <div class="sts st1"></div> 
    <div class="sts st2"></div> 
    <div class="sts st3"></div> 
    <div class="sts st4"></div> 
    <div class="sts st5"></div> 
    <div class="stf"></div> 
</div> 

，並在你的CSS使用~：

.st1:hover ~ .stf { 
    width: 28px; 
} 
.st2:hover ~ .stf { 
    width:56px; 
} 
.st3:hover ~ .stf { 
    width:84px; 
} 
.st4:hover ~ .stf { 
    width:112px; 
} 
.st5:hover ~ .stf { 
    width:140px; 
} 

一些閱讀下載：http://css-tricks.com/child-and-sibling-selectors/

Answer 2

你介意用jQuery嗎？希望這個代碼將幫助您在正確的方向：

JSFiddle.

CSS

#stars_container { 
background:#ddd; 
background-width:0; 
position:absolute: 
top:0; 
left:0; 
display:block; 
height:12px; 
width:0; 
} 


.sts { display:inline; } 

HTML

<div id="stars_container"></div> 

<div class="sts" data-stars="10">1</div> 
<div class="sts" data-stars="20">2</div> 
<div class="sts" data-stars="30">3</div> 
<div class="sts" data-stars="40">4</div> 
<div class="sts" data-stars="50">5</div> 

jQuery的

$(".sts").hover(function() { 
    var len = $(this).data('stars'); 
    $("#stars_container").css({'width':len+'px'}); 
});