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代码的悬停块具有属性和值，正常状态没有所以它在应用新属性时移动。如果你不想让它移动，那就让颜色成为唯一的区别。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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：悬停移动文本

3 个答案: