css菜单跳动

Question

HTML：

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

.hardlink {
    color: #FFF !important;
}      
.hardlink:hover{
    background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px; 
    background-color:#21374c; 
    border:1px solid #5badff;
    display:inline-block; 
    line-height:20px;
}  

是什么导致了悬停在每个链接上的整个div抖动行为？

Answer 1

您正在:hover上添加一个border。要解决这个问题-只需将透明边框添加到正常状态以及

.hardlink {
    color: #fff !important;
    border: 1px solid transparent;
}