아이콘 태그의 CSS 스프라이트 위치 변경

Question

호버에서 아이콘 태그의 배경 위치를 변경하려고합니다. 태그 대신 아이콘 태그에있는 경우 어떻게해야합니까?

는 HTML 아이콘 태그는 다음과 같습니다

<a class="info" href="#"><i class="tag"></i> Info</a> 
<a class="info" href="#"><i class="other_tag"></i> Other Info</a> 

CSS의는 다음과 같습니다

.tag { 
    background: url('images/tag.png') no-repeat 0 0; 
    width: 13px; 
    height: 13px; 
    display: inline-block; 
} 

.other_tag { 
    background: url('images/other_tag.png') no-repeat 0 0; 
    width: 13px; 
    height: 13px; 
    display: inline-block; 
} 

.info { 
    color: #6a9d2b; 
    position: relative; 
    left: 10px; 
    text-decoration: none; 
    line-height: 20px; 
} 

.info:hover { 
    background-position: 0 -13px; 
    color: #4a6e1e; 
} 

이 아이콘은 실제로 높이 폭 31px에서 13px되는 폭입니다.

Answer 1

그냥 그렇게 중첩 규칙을 넣어 :

.info:hover .tag { 
    /* Put a different background position */ 
} 

.info:hover .other-tag { 
    /* Put a different background position */ 
}