ナビのボタン ホバー時に、上下にガタガタ動くのを止めたい

Question

リンク内容

ナビのボタンにマウスをのせると、上下に揺れるというかガタガタ動きます。
この動きを止めたいです。

• やったこと
  padding,marginがあやしいと思って、数値を上げて広げましたが、改善せず。

もう少しググればわかる気もするのですが、ちょっと時間がかかり過ぎたのでお願いしたいと思います。

よろしくお願いします。

Answer 1

問題箇所にあらかじめ無色（透明色）のボーダーを設置。
ホバーされた時に、有色にする。で解決しました。

透明色のボーダーは、下記を記述しました。

border-bottom: solid 2px rgba(0, 0, 0, 0);

Answer 2

.dropdown button:hover{
  border-bottom: solid 2px white;
}

こちらの記述のせいで、ボタンにhoverされたとき、下にボーダーが2pxつくようになっているのが原因です。
解決策はいくつもありますが、どれも追加されてしまう2pxをどうにかするようなものになります。

例えば、あらかじめボタン要素と同じ色のボーダーをつけておいて、hoverした時だけ白くしたり、
hoverしたときだけ要素の高さを2px低くする、など。

Comments

[synth]

ありがとうございます！！
原因と、対策、とても分かりやすく説明していただき、無事解決しました！！
最終的には、教えていただいた、ボタン要素と同じ色のボーダーを付けておく。で解決しました。
本当にありがとうございます（涙）

Answer 3

:hover (擬似クラス)
https://developer.mozilla.org/ja/docs/Web/CSS/:hover

ナビのボタン要素に、CSSの:hoverが定義されていて、
マウスが要素の上を通過したらボタンが少し動くようにしているのかもしれません。

他に、マウスが通過したら要素の色が変わるようにしたいときにも:hoverはよく使われます。