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

您正在添加一个borderon :hover。要解决此问题 - 只需在正常状态下添加透明边框即可 DEMO

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