인라인 CSS 문제

Question

I가 다음 스크립트 : 입증 된 바와 같이, 잘 작동하지만 최대한 빨리 인라인 CSS의 방법을 사용하여 배경 이미지를 추가하는 외부 CSS로 변경, 그것은 작동이 중지

http://jsfiddle.net/oshirowanen/8mQ7x/1/

여기 :

http://jsfiddle.net/oshirowanen/8mQ7x/

는 내가 HTML을 동적으로 생성되기 때문에 인라인 CSS로 그것의 일부가 필요합니다. 각 아이콘에 대해 서로 다른 이미지를 사용하여 많은 일반 아이콘을 만들려고하지만 일반적인 CSS 외부 파일을 사용하여 마우스 오버 효과가 발생합니다.

인라인 CSS를 사용하여 이미지를 추가 할 때 왜 이것이 작동을 멈추고 어떻게 작동합니까?

Answer 1

요소 style CSS 규칙은 다른 CSS 규칙보다 우선 순위가 높습니다. 요소 스타일의 background에 의해 기본 배경뿐만 아니라 :hover도 재 작성됩니다.

background-image 만 다시 작성해야합니다. 예 : http://jsfiddle.net/8mQ7x/3/