BinaryDevelop
  1. ホーム
  2. css

[解決済み] 要素を移動せずにホバー時にCSSボーダーを追加する [複製］

2022-02-18 16:38:09

質問

ホバー時に背景のハイライトを適用する行があります。 

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

しかし、ボーダーが1px追加されるため 追加 を追加すると、その要素が「移動」してしまいます。ここで（背景画像を使わずに）上記の動きを補うにはどうしたらよいでしょうか？

解決方法は？

ボーダーを透明にすることができます。この方法では、境界線は存在しますが、目に見えないので、周囲に何かを押しつけることはありません。 

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

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

<div class="jobs">
  <div class="item">Item</div>
</div>

すでにボーダーがある要素で、移動させたくない場合は、ネガティブマージンを使用することができます。 

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

.jobs .item:hover {
   background: #e1e1e1;
    border: 3px solid #d0d0d0;
    margin: -2px;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

既存のボーダーに幅を持たせるもう一つの方法は box-shadow を、必要なピクセル幅の spread 属性で指定します。 

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

.jobs .item:hover {
    background: #e1e1e1;
    box-shadow: 0 0 0 2px #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します