CSS ホバー境界線が隣接する要素を移動しないようにするにはどうすればよいですか?

CSS ホバー境界線を使用して要素の位置を調整する

CSS 境界線を使用してホバー効果を作成すると、隣接する要素がわずかに移動または「ジャンプ」する場合があります。この問題は、境界線によって要素に余分な幅が追加され、境界線のない他の要素との相対的な位置が変更される場合に発生します。

解決策: 透明な境界線

この位置を解決するにはこの問題を解決するには、要素の非ホバー状態に透明な境界線を追加します。これにより、ホバー ステータスに関係なくすべての要素が同じ幅になり、予期しないシフトが防止されます。

例: 垂直アンカー メニュー

内のアンカーの垂直メニューを検討してください。順序のないリスト。次の CSS スニペットは問題を示しています:

div a:visited, #homeheader a {
    text-decoration: none;
    color: black;
    margin-right: 5px;
}

div a:hover {
    background-color: #D0DDF2;
    border-radius: 5px;
    border: 1px solid #102447;
}

div li {
    padding: 0;
    margin: 0px 10px;
    display: inline;
    font-size: 1em;
}

アンカーの上にマウスを置くと、追加された境界線により、左側にあるすべてのアンカーがわずかに右に移動します。

これを修正するには、透明な境界線を非ホバー状態に追加できます:

#homeheader a:visited, #homeheader a {
    border: 1px solid transparent;
}

この変更により、すべてのアンカーが一貫した幅を持つようになり、 「ジャンピネス」効果と適切な要素の配置の維持。

以上がCSS ホバー境界線が隣接する要素を移動しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。