ホバー生成の境界線によって生じる要素の移動を解決する方法

序文

hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box box-sizing: border-boxを設定し、要素の幅と高さを指定しても、コンテンツは境界線によって圧迫されたままです。たとえば、次のような状況です。

<スタイル タイプ="text/css" メディア="screen">
    。テスト {
        高さ: 30vmin;
        幅: 30vmin;
        背景: 水色;
        ボックスのサイズ: 境界線ボックス;
    }
    .test:hover {
        境界線: 5px 黒一色;
    }
</スタイル>
<div class="test">
    これはdivです。
</div> 

理由は明らかです。要素のサイズは変更されていません（要素の幅と高さが設定されていないか、 box-sizing: border-boxが使用されている場合、要素のサイズは変更されます）。box box-sizing: border-box効果的ですが、突然追加された境界線により、要素内のコンテンツが押し出されています。ボックスモデルは、外側から内側へのmargin 、 border 、 padding 、およびcontentであるため、新しく追加されたborderにより、必然的にcontentが小さく圧縮され、 contentの境界座標も変更され、視覚的なコンテンツが移動します。したがって、問題の解決策は、境界線の追加がcontentの位置に影響を与えないようにすることです。

要素に境界線を追加する

境界線が突然現れると、元のレイアウトが変わり、コンテンツが移動します。この場合、境界線を以前のレイアウトにそのまま残しておくことができます。

。テスト {
    高さ: 30vmin;
    幅: 30vmin;
    背景: 水色;
    境界線: 5px 透明実線;
    ボックスのサイズ: 境界線ボックス;
}
.test:hover {
    境界線: 5px 黒一色;
}

ボックスシャドウの使用

ボックス モデルのスペースを占有しないbox-shadowまたはoutlineを使用することもできます。

.test:hover {
    /* 境界線: 5px 黒一色; */
    ボックスシャドウ: 0 0 0 5px 黒;
    アウトライン: 5px 黒
}

パディングを使用する

paddingサイズを変更することで、 border用のスペースを確保できます。

。テスト {
    高さ: 30vmin;
    幅: 30vmin;
    背景: 水色;
    ボックスのサイズ: 境界線ボックス;
    パディング: 5px;
}
.test:hover {
    パディング: 0;
    境界線: 5px 黒一色;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。