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

您在border上添加了:hover。要解决此问题 - 只需将透明边框添加到正常状态DEMO

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

css菜单急躁

1 个答案: