悬停抖动效果的css问题

<style type="text/css"> 
    .linkcontainer{border-right: solid 0.2px white;margin-right:1px} 
    .hardlink{color: #FFF !important; border: 1px solid transparent; }  
    .hardlink:hover{ 
      background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px; 
      display:inline-block; 
      background-color:#21374C; 
      border:0.2px solid #5badff; 
      line-height:20px; 
      text-decoration:none !important;} 
</style> 

<div style="padding-bottom:3px;background:transparent; color:white!important; float:left; margin-right:20px; line-height:42px;"> 
    <span class="linkcontainer"> 
     <a class="hardlink" style="padding:0 10px;" href="http://hronline">HROnline</a> 
    </span> 
    <span class="linkcontainer"> 
     <a class="hardlink" style="padding:0 10px; " href="http://hronline/ec">Employee Center</a> 
    </span> 
    <span class="linkcontainer"> 
     <a class="hardlink" style="padding:0 10px; " href="http://hronline/businesscommunities">Business Communities</a> 
    </span> 
    <span class="linkcontainer"> 
     <a class="hardlink" style="padding:0 10px;" href="http://hronline/internalservices">Internal Services</a> 
    </span> 
    <span class="linkcontainer"> 
     <a class="hardlink" style="padding:0 10px;" href="http://hronline/policiesprocedures">Policies&procedures</a> 
    </span> 
    <span class="linkcontainer"> 
     <a class="hardlink" style="padding:0 10px;" href="http://hronline/qualitybestpractices">Best Practices</a> 
    </span> 
</div>

我向包含菜单链接的跨度添加了一个右边框。当我悬停在每个菜单链接上时，它也有一些背景。这对整个集装箱造成了生涩的影响。是什么导致悬停效果不佳？我似乎没有弄清楚 - 再次..悬停抖动效果的css问题

来源

2012-08-30 Athapali

你可以让[小提琴]（http://jsfiddle.net/3QdtM/）或者你可以你的网址来看看效果。 –

http://jsfiddle.net/mbeQk/1/ – Athapali

它不会产生你提到的问题，可能是你应该使用悬停式样面板中的图像。 –

您的.hardlink类具有1px边框，并且悬停上的相同类具有0.2px边框。

来源

2012-08-30 21:50:41

谢谢！哇！真是个大错！ :) – Athapali

作为奴隶提到，你改变边框的大小。不幸的是，不到1个像素不存在。如果您将margin-left: 1px; margin-right: 1px;添加到您的悬停CSS并将border置于0px上，则不会跳转。如果您想保留边框，请尝试使用其他颜色（可能颜色较暗）。

来源

2012-08-30 21:54:34

悬停抖动效果的css问题

回答

相关问题