CSS a:hover 移动文本

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

问题是 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 2

试试这个，

 #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 标签

Answer 3

谢谢@Sathish S 我使用了元素的移动，但随后只是将填充放在不同的位置并且工作正常。

#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;
}

CSS a:hover 移动文本

CSS a:hover moving text

css