要素を移動せずにホバー時に CSS 境界線を追加する方法

要素の移動なしでホバーに CSS 境界線を追加する

ホバー効果で要素にハイライトされた背景を適用する場合、CSS 境界線を追加すると、予想外の結果に。追加の 1 ピクセルの境界線により要素の幅が広がり、位置が移動します。背景画像のアプローチに頼らずにこれを処理するにはどうすればよいでしょうか?

解決策は、要素に透明な境界線を作成して開始することです。

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

この方法では、境界線は存在しますが、目に見えないままになり、動きが発生するのを防ぎます。ホバー効果が適用される場合:

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

強調表示された背景は色付きの境界線とともに適用されますが、境界線はすでに透明であるため、要素の寸法は変更されません。その結果、ホバー時に要素の位置は一貫したままになります。

以上が要素を移動せずにホバー時に CSS 境界線を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。