Không thể thay đổi màu nền li trên Hover

Question

Bạn có thể xem this link và cho tôi biết lý do tại sao tôi không thể thay đổi màu nền của li khi di chuột?

<ul class="inline"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>3</li> 
    <li>3</li> 
</ul> 

Css:

.inline li{ 
    width:18% !important; 
    background:#FFF !important; 
} 
.inline li: hover{ 
    background:#A5A5A5 !important; 
} 

Answer 1

Bạn có một không gian thêm trước khi di chuột.

.inline li:hover{ 
    background:#A5A5A5 !important; 
} 

Answer 2

Edited jsfiddle. Xóa không gian trống trước hover.

.inline li:hover{ 

    background:#A5A5A5 !important; 
} 

Answer 3

Bạn có thêm dung lượng trước khi di chuột. Nó nên là:

.inline li:hover { 
Stylings 
} 

Answer 4

Khoảng cách giữa li và :hover là CSS hợp lệ, nhưng không phải trong trường hợp này. Sử dụng li :hover sẽ áp dụng kiểu khi bạn di chuột qua bất kỳ hậu duệ nào của số li. Những gì bạn đang sử dụng là CSS không hợp lệ. Bạn không thể có một dấu hai chấm giữa một phần tử và một lớp giả. Vì vậy, bằng cách sử dụng li:hover, bạn đang chỉ định các kiểu khi li đang được di chuột qua.

Tôi cũng khuyên bạn không nên sử dụng !important, bởi vì nó có thể gây ra một số vấn đề sau này trên đường. Sử dụng các bộ chọn DOM cụ thể hơn, như ul.inline li:hover.

Fiddle

Answer 5

nó là bởi vì bạn đang sử dụng quan trọng trên li không di chuột và có một khoảng trống giữa li và : di chuột

.inline li{ 
    width:18%!important; 
    background:#FFF; 
} 

.inline li:hover{ 
    background:#A5A5A5!important; 
} 

demo: http://jsfiddle.net/NRZeD/14/