悬停时的css问题-抖动效果

Question

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

我在跨度中添加了一个包含菜单链接的右边框。当我将鼠标悬停在每个菜单链接上时，它也有一些背景。这会在整个容器上造成抖动效应。是什么导致了悬停的抖动效应？我好像又弄不明白了--再一次..

Answer 1

你的.hardlink类有1px的边框，同样的类在悬停时有0.2px的边框。

Answer 2

正如Slave所提到的，您可以更改边框大小。不幸的是，不存在小于1像素的像素。如果您将margin-left: 1px; margin-right: 1px;添加到悬停的css中，并将border放在0px上，它不会跳转。如果你想保留边框，可以尝试不同的(也许更暗的)颜色。