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

メニュー リンクを含むスパンに右の境界線を追加しました。各メニュー リンクにカーソルを合わせると、背景も表示されます。これは、コンテナ全体にぎくしゃくした効果を引き起こしています.ホバー時に揺れる効果を引き起こしているのは何ですか? 私はそれを理解していないようです--再び..

4

2 に答える 2

4

.hardlink クラスには 1 ピクセルの境界線があり、ホバー時の同じクラスには 0.2 ピクセルの境界線があります。

于 2012-08-30T21:50:41.400 に答える
1

スレーブが述べたように、境界線のサイズを変更します。残念ながら、1 px 未満は存在しません。margin-left: 1px; margin-right: 1px;ホバー CSS に追加してborderオンにすると、0pxジャンプしません。境界線を維持したい場合は、別の (おそらく暗い) 色を試してください。

于 2012-08-30T21:54:34.983 に答える