mimic: hover css sử dụng một lớp css

Question

Tôi có một loạt các div mà tôi sử dụng để tạo đầu vào "xếp hạng sao". Thông thường các ngôi sao có màu xám, khi chuột di chuyển qua một trong các ngôi sao, các ngôi sao sẽ có màu và nó sẽ hoạt động.

Bây giờ tôi muốn một lớp học "bắt chước" hành vi di chuột và tôi gọi nó là active vì vậy khi tôi đặt lớp đó sao lấp đầy màu sắc, nhưng điều đó không hoạt động.

Đây mã:

HTML

<span class="rating"> 
<span class="star active"></span> 
<span class="star"></span> 
<span class="star"></span> 
<span class="star"></span> 
<span class="star"></span> 
</span> 

CSS

.rating span.star:before { 
    content: "\f005"; 
    padding-right: 5px; 
    color: #bbb; 
} 

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Đây là fiddle: http://jsfiddle.net/fuTfX/

Tôi đang sử dụng FontAwesome để hiển thị những ngôi sao

Answer 1

Bạn quên để thêm :before cho quy tắc .active. Thay đổi

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Để

.rating span.star:hover:before, .rating span.star.active:before, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Answer 2

này cung cấp cho một thử (tôi chuyển màu trên :before để chỉ span):

.rating span.star { 
    color: #bbb; 
} 
.rating span.star:before { 
    content: "\f005"; 
    padding-right: 5px; 
} 

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Answer 3

phế liệu Cách tiếp cận và Thực hiện kim tự tháp Absolute Positioning

JSFIDDLE --->http://jsfiddle.net/5n5Xt/

Html:

<ul> 
    <li><a href="#"><span>Rating 1 of 5</span></a></li> 
    <li><a href="#"><span>Rating 2 of 5</span></a></li> 
    <li><a href="#"><span>Rating 3 of 5</span></a></li> 
    <li><a href="#"><span>Rating 4 of 5</span></a></li> 
    <li><a href="#"><span>Rating 5 of 5</span></a></li> 
</ul> 

.210

CSS:

ul { background: url(gray_stars.png) no-repeat; width: 120px; height: 20px; position: relative;} 
li a { display: block; position: absolute; top 0; height: 20px; left: 0; 
li:first-child a { width: 20px; z-index: 5;} 
li + li a { width: 40px; z-index: 4;} 
li + li + li a { width: 60px; z-index: 3;} 
li + li + li + li a { width: 80px; z-index: 2;} 
li + li + li + li + li a { width: 100px; z-index: 1;} 
li + a:hover {background: url(yellow_stars.png) no-repeat;} 
ul li span { display: none;} 

Phương thức hoạt động

Về cơ bản sao của bạn tạo ra một hình chữ nhật chồng lên nhau. Ngôi sao thứ nhất bao gồm một hộp 20x20 với chỉ số z cao nhất -> biến nó thành ngôi sao đầu tiên và trên đỉnh của tất cả các ngôi sao. Ngôi sao thứ 2 là một hình chữ nhật bao gồm ngôi sao đầu tiên + ngôi sao thứ hai. Chỉ số z của nó làm cho nó DƯỚI ĐÂY ngôi sao đầu tiên nhưng cũng giống như ngôi sao đầu tiên, nó sẽ bị chồng chéo bởi các ngôi sao liên tiếp. -> lặp lại điều này cho tất cả 5 sao sao cho mỗi ngôi sao có vùng 20x20 là "có thể di chuột" tại bất kỳ thời điểm nào. Vì mỗi ngôi sao neo thực sự là "chiều dài đầy đủ" từ phía bên trái nếu bạn di chuột sao 4 -> tất cả 80px được kích hoạt và bạn thấy 4 ngôi sao vàng. Nhưng sau đó khi bạn đi đến ngôi sao 3, chỉ có ngôi sao 3 được kích hoạt -> 3 sao xuất hiện.

Hy vọng điều đó sẽ giải thích. Tôi đã ném một jsfiddle nhanh chóng mà tôi hy vọng sẽ giúp bạn. Tôi đã sử dụng các màu đồng bằng nhưng bạn thấy các hộp "màu vàng" 1-5 màu lên khi được di chuột.