cssa：悬停移动文本

当我将鼠标悬停在元素上时，我遇到了文本移动问题。在你将鼠标悬停在它上面之前，它工作得很好

因此，为了澄清，将鼠标移到文本和背景颜色上，所有内容都会正确更改，只是文本移动到比原始文本更高的位置

这是我为这个元素编写的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;
    }

你能告诉我如何解决这个问题吗

---

谢谢

问题在于CSS代码的悬停块具有属性和正常状态所没有的值，因此它会随着新属性的应用而移动。如果你不想让它移动，就让颜色成为唯一的区别

li.item-8a{
背景图片：url（“../images/menu/top-panel-login-bg1.png”）！重要信息；
背景位置：中-中！重要；
背景重复：不重复！重要；
左边距：-3px；
利润上限：-8px；
宽度：114px；
}
li.item-8a：悬停{
背景图片：url（“../images/menu/top-panel-login-bg1.png”）！重要信息；
背景位置：中-中！重要；
背景重复：不重复！重要；
颜色：hsl（0,1,25%）；
左边距：-3px；
利润上限：-8px；
宽度：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 {
        display: block;
        font-size: 12px;
        padding: 22px 0 0 35px;
        margin-left: -3px;    
        margin-top: -8px; 
        width: 114px; 
    }

---

我将

margin

属性更改为

a

tag

谢谢@Sathish，我使用了元素的移动，但只是将填充放置在不同的位置，这样就可以了

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

---

它在Joomla网站上，所以不知道如何显示。。。对不起，当你将元素悬停时，它当然会移动。。。特别是在

：hover

样式：

左边距：-3px；利润上限：-8px；宽度：114px。尝试移除和/或调整这些，看看会发生什么？