호버에서 li 배경색을 변경할 수 없습니다.

Question

this link을 보시고 왜 호버에서 리의 배경색을 바꿀 수 없습니까?

<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

당신은 호버 전에 여분의 공간이있다.

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

Answer 2

Edited jsfiddle. hover 앞에 빈 공간을 제거하십시오.

.inline li:hover{ 

    background:#A5A5A5 !important; 
} 

Answer 3

마우스를 가져 오기 전에 추가 공간이 있습니다. 그것은해야한다 : li와 :hover 사이

.inline li:hover { 
Stylings 
} 

Answer 4

공간이 경우 유효 CSS는 아니지만. li :hover을 사용하면 li의 자손 위로 마우스를 올리면 스타일이 적용됩니다. 잘못된 CSS를 사용하고 있습니다. 요소와 의사 클래스 사이에 콜론을 사용할 수 없습니다. 따라서 li:hover을 사용하여 li을 올리면 스타일을 지정합니다.

나중에 도로에 문제가 발생할 수 있으므로 !important을 사용하지 않는 것이 좋습니다. ul.inline li:hover과 같은보다 구체적인 DOM 선택기를 사용하십시오. !

Fiddle

Answer 5

당신이 을 사용하고 있기 때문에 그것이 가져하지 리튬에 중요한 S와 리와 사이에 공백이 : 마우스를

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

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

데모 : http://jsfiddle.net/NRZeD/14/