1. 発生の原因

CSSのhover時に揺れが生じる原因は通常、ボックスモデルやレイアウトに関連しており、要素がhover状態で一部のスタイルが追加され、要素のサイズや位置が変化することによって揺れが発生する可能性があります。

2. 解決方法

2.1ボーダーの影響

/* もしhover状態でボーダーが追加され、非hover状態でボーダーの幅が考慮されていない場合、揺れの原因となる可能性があります。非hover状態でも十分なスペースを要素に確保するようにしてください。 */
/* 悪い例 */
.box {
  border: 1px solid transparent;
  transition: border-color 0.3s;
}

.box:hover {
  border-color: red;
}

/* 良い例 */
.box {
  border: 1px solid transparent;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.box:hover {
  border-color: red;
}

2.2幅と高さの変化

/* もしhover状態で要素の幅や高さが変化し、非hover状態で適切に設定されていない場合、揺れの原因となる可能性があります。 */
/* 悪い例 */
.box {
  width: 100px;
  height: 100px;
  transition: width 0.3s;
}

.box:hover {
  width: 120px;
}

/* 良い例 */
.box {
  width: 100px;
  height: 100px;
  transition: width 0.3s;
  box-sizing: border-box;
}

.box:hover {
  width: 120px;
}

2.3透明度の変更

/* いくつかのケースでは、要素の透明度を変更すると揺れが生じることがあります。非hover状態でも透明度を設定するようにしてください。 */
/* 悪い例 */
.box {
  opacity: 1;
  transition: opacity 0.3s;
}

.box:hover {
  opacity: 0.8;
}

/* 良い例 */
.box {
  opacity: 1;
  transition: opacity 0.3s;
}

.box:hover {
  opacity: 0.8;
}

2.4 transformプロパティーの使用

/* 一部のケースでは、transformプロパティを使用する方が効果的かもしれません。これはレイアウトに起因する揺れを避けるため、文書フローに影響を与えません。 */
.box {
  transition: transform 0.3s;
}

.box:hover {
  transform: scale(1.1);
}