호버 (hover)가있는 라디오 입력

Question

라디오 상자에 호버를 추가하려고합니다. ! important가 작동하지 않습니다. 무선 입력 필드를 가져 오는 방법이 있습니까? jsfiddle에서 전체 예제를 볼 수 있습니다. 012 라인을 39 번에 보내려고했는데

다섯 번째 라디오 상자를 선택하고 첫 번째 라디오 버튼을 가리키면 다른 라디오 라디오가 회색으로 바뀌고 주황색이됩니다.

/* Filled Rating */ 
.rating-fill{ 
    width:0; 
    height:100%; 
    background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGOEI0MDAiIHBvaW50cz0iMTAsMCAxMy4xLDYuNiAyMCw3LjYgMTUsMTIuOCAxNi4yLDIwIDEwLDE2LjYgMy44LDIwIDUsMTIuOCAwLDcuNiA2LjksNi42ICIvPg0KPC9zdmc+DQo='); 
    position:absolute; 
    background-size: contain; 
    top:0; 
    left:0; 
    z-index:1; 
} 

/* Checked Inputs */ 

.radio-wrap input[value="5"]:checked + .rating-fill{ 
    width:100%; 
} 

.radio-wrap input[value="4"]:checked + .rating-fill{ 
    width:80%; 
} 

.radio-wrap input[value="3"]:checked + .rating-fill{ 
    width:60%; 
} 

.radio-wrap input[value="2"]:checked + .rating-fill{ 
    width:40%; 
} 

.radio-wrap input[value="1"]:checked + .rating-fill{ 
    width:20%; 
} 


/* Blank Stars */ 

.rating-blank{ 
    width:100%; 
    height:100%; 
    background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    position:absolute; 
    background-size: contain; 
    top:0; 
    left:0; 
    z-index:0; 
} 

는

http://jsfiddle.net/9q9gfob6/2/

Answer 1

코드는 실제로 노력하고 있습니다. 첫 번째 별이 이미 선택 되었기 때문에 (처음에는 너비가 이미 20 %) 호버가 적용되지 않습니다.

.radio-wrap input[value="5"]:hover + .rating-fill{ 
    width:100%; 
} 

.radio-wrap input[value="4"]:hover + .rating-fill{ 
    width:80%; 
} 

.radio-wrap input[value="3"]:hover + .rating-fill{ 
    width:60%; 
} 

.radio-wrap input[value="2"]:hover + .rating-fill{ 
    width:40%; 
} 

.radio-wrap input[value="1"]:hover + .rating-fill{ 
    width:20%; 
} 

Fiddle
다섯 번째 입력하므로, 어떠한 영향을하지 않습니다 다섯 번째 별을 유혹 삭제됩니다.