1

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 全体がぎくしゃくする原因は何ですか?

4

1 に答える 1

2

にを追加してborderい:hoverます。この問題を修正するには、通常の状態に透明な境界線を追加するだけです。 デモ

.hardlink {
    color: #fff !important;
    border: 1px solid transparent;
}
于 2012-08-30T19:07:34.817 に答える