스타 등급 시스템 용 CSS

Question

내가 올려 놓은 별의 양을 표시하는 5 성급 시스템을 만들려고합니다.

배경이 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'}); 
});