CSS a : 마우스를 움직이는 텍스트

Question

텍스트를 움직이는 데 문제가있어서 요소 위에 마우스를 올려 놓습니다. 그 위에 마우스를 가져갈 때까지 잘 작동합니다.

그래서 텍스트와 배경색 위에 마우스를 올려 놓으면 모든 것이 바뀌고 텍스트 만 원래 텍스트보다 더 많이 움직입니다.

이 내가이 요소에 대해 가지고있는 CSS 코드 :

#top_login_panel ul.menu_topPanel li.item-8 { 
     background: url("../images/menu/top-panel-login-bg.png") no-repeat scroll 0 0 hsla(0, 0%, 0%, 0); 
     height: 43px; 
     width: 145px; 
    } 
    #top_login_panel ul.menu_topPanel li.item-8 a { 
     width: 145px; 
    } 
    #top_login_panel ul.menu_topPanel li.item-8 a:hover { 
     background-image: url("../images/menu/top-panel-login-bg1.png") !important;  
     background-position: center center !important;  
     background-repeat: no-repeat !important;  
     color: hsl(0, 1%, 25%);  
     margin-left: -3px;  
     margin-top: -8px; 
     width: 114px; 
    } 
    #top_login_panel ul.menu_topPanel li.item-8 a { 
     display: block; 
     font-size: 12px; 
     padding: 22px 0 0 35px; 
    } 

당신이 조언을 주시겠습니까 방법이 문제를 해결하려면?

감사

Answer 1

감사 @Sathish SI는 요소의 이동을 사용 변경 그러나 단지 배치 다른 위치의 패딩과 작동합니다. 호버 : 그를 표시하는 방법을 확신하지 줌라의 웹 사이트에서

#top_login_panel ul.menu_topPanel li.item-8 a { 
    display: block; 
    font-size: 12px; 
    margin-left: -3px;  
    margin-top: -12px; 
    width: 114px; 
} 


#top_login_panel ul.menu_topPanel li.item-8 a:hover { 
    background-image: url("../images/menu/top-panel-login-bg1.png") !important;  
    background-position: center center !important;  
    background-repeat: no-repeat !important;  
    color: hsl(0, 1%, 25%); 
} 

#top_login_panel ul.menu_topPanel li.item-8 a { 
    padding: 31px 0 0 35px; 
} 

Answer 2

문제 CSS 코드의 호버 블록 특성을 갖고, 정상 상태는 새로운 속성이 적용되므로 그래서이 이동하지 않는 것을 값이다. 당신이 그것을 움직이기를 원하지 않는다면 색깔 만이 유일한 차이점이되도록하십시오.

li.item-8 a { 
 
     background-image: url("../images/menu/top-panel-login-bg1.png") !important;  
 
     background-position: center center !important;  
 
     background-repeat: no-repeat !important;  
 
     margin-left: -3px;  
 
     margin-top: -8px; 
 
     width: 114px; 
 
    } 
 
li.item-8 a:hover { 
 
     background-image: url("../images/menu/top-panel-login-bg1.png") !important;  
 
     background-position: center center !important;  
 
     background-repeat: no-repeat !important;  
 
     color: hsl(0, 1%, 25%);  
 
     margin-left: -3px;  
 
     margin-top: -8px; 
 
     width: 114px; 
 
    }

<ul> 
 
    <li class="item-8"><a href="#">One</a></li> 
 
    <li class="item-8"><a href="#">One</a></li> 
 
    <li class="item-8"><a href="#">One</a></li> 
 
    <li class="item-8"><a href="#">One</a></li> 
 
    </ul>

Answer 3

이 시도.,

#top_login_panel ul.menu_topPanel li.item-8 a:hover { 
     background-image: url("../images/menu/top-panel-login-bg1.png") !important;  
     background-position: center center !important;  
     background-repeat: no-repeat !important;  
     color: hsl(0, 1%, 25%);  
    } 
    #top_login_panel ul.menu_topPanel li.item-8 a { 
     display: block; 
     font-size: 12px; 
     padding: 22px 0 0 35px; 
     margin-left: -3px;  
     margin-top: -8px; 
     width: 114px; 
    } 

내가 margin 재산 태그 a에