0

マウスをホバーしたときに各ボックスを強調表示するのが好きです。効果を表示することはできますが、ホバーするとボックスが少し右に移動/拡大するように見えます。では、どうすればこれを回避できますか? ここに画像の説明を入力

どうすればこれを回避できますか?

html

    <div id="divtargetDay_1__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_2__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_3__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_4__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_5__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_6__Assigned" class=" divday divfloatpointerleft"></div>

CSS

.divborderhighlight {
   border:1px solid red;
}

.divfloatpointerleft {
    cursor:pointer;
    float:left;
}

.divday {
    width: 56px !important;    
    height: 56px !important; 
    margin-right:4px;   
}

JS

function dayHover(index) {
        labels[index].hover(function () {
            $(this).addClass('divborderhighlight');
        }, function () {
            $(this).removeClass('divborderhighlight');
        });
    }
4

4 に答える 4

3

問題はこれです：

.divborderhighlight {
   border: 1px solid red;
}

これを境界線のない div に追加すると、合計幅が 2px (両側の境界線で 1px) 増加します。

いくつかの解決策があります。1 つは、次のように、ハイライトされていないすべての div に透明な境界線を追加することです。

.divfloatpointerleft {
    cursor: pointer;
    float: left;
    border: 1px solid transparent;
}

赤い境界線が追加されても、幅は透明な境界線の形で既に存在するため、幅は追加されません。このソリューションは、オーバーレイなしで元のコンテンツを保持しながらハイライトを追加する場合に最適です。

もう 1 つの解決策は、マウスオーバー時に境界線の代わりに Outline プロパティを使用することです。

.divborderhighlight {
   outline: 1px solid red;
}

これは、border プロパティと同じように機能しますが、要素に幅や高さを追加しないオーバーレイとして機能します。これの欠点は、要素の周囲に沿って 1px を隠すことです。

于 2013-09-23T07:55:39.567 に答える
3

ボーダーの代わりにアウトラインを使用:

.divborderhighlight {
   outline:1px solid red;
}

概要ドキュメント

アウトラインはスペースを取りません。

http://jsfiddle.net/XCtQB/

于 2013-09-23T07:57:16.123 に答える
2

CSS を使用してホバー動作を指定します。

divday:hover  {
   border:1px solid red;
}

次に、ボーダーの代わりにアウトラインを使用します。

.divday:hover  {
   outline:1px solid red;
}

別の解決策は、状態で透明な境界線を使用し、default状態で固定/色付けすることhoverです。

.divday  {
   border:1px solid transparent;
}
.divday:hover  {
   border:1px solid red;
}

Running Demo

于 2013-09-23T08:05:29.820 に答える
0

透明な境界線を追加します:

.divday {
    width: 56px !important;    
    height: 56px !important; 
    margin-right:4px;   
    border: 1px solid transparent;
}
于 2013-09-23T07:55:06.337 に答える