CSS hover時に文字が1px？ぐらいズレるのを防ぎたい

Question

CSS初心者です
hoverしたときにborderをつけるのですが、hoverすると文字が1pxほど動きます
これを動かさずborderを与えたいです
ご存知の方お願いします

<style>
.ho {
border: 0px solid blue;
transition: all 0.3s ease;
box-sizing:border-box;
  }
.ho:hover {
border: 1px solid blue;
  }
</style>

<div class="ho" style="width:300px;height:300px;background:red">aaaaa</div>

Answer 1

border: 0px solid blue;

こちらを border: 1px solid transparent; としてみるといかがでしょう

Comments

[qwtye]

変わりありません
文字がずれています

[qwtye]

私の勘違いでした
ずれがなかったです
申し訳ありません！！

Answer 2

border の太さではなく色を変更するっていう方法だと
期待通りの動きになると思いますが・・・どうでしょうかね

<style>
.ho {
border: 1px solid red;
transition: all 0.3s ease;
box-sizing:border-box;

  }
.ho:hover {
border: 1px solid blue;
  }
</style>

<div class="ho" style="width:300px;height:300px;background:red">aaaaa</div>

Comments

[qwtye]

ありがとうございます
border: 1px solid transparent;
で対応できました！

Answer 3

.ho {
    border: 1px solid transparent;

これでいかがでしょうか

Comments

[qwtye]

その解決方法であっていました！

Answer 4

.ho {
border: 0px solid blue;

ここを

.ho {
border: 1px solid blue;

に変更すると、hoverする前の .ho に、青のボーダーが出ると思います。
そうすると、hover時と同じ枠線の太さになるので、文字のズレが消えるかもしれません。

Comments

[qwtye]

それだとずっとborderついたままになると思うんですが、、
hover outでborderは消したいんです

[退会済みユーザー]

そうなのですね。

.ho　の　width　に、適当な固定値をセットしてはどうでしょうか。
そうすると、ズレはなくなると思います。

また、hoverしていないときは、borderは必要ないのでしたら、
その行は消しちゃってもOKだと思います。

[qwtye]

border: 1px solid transparent;で解決しました！