CSSでホバーした時に変化させる方法

ここでは、CSSでホバーをした時に変化をさせる方法について説明していきます。

構文

セレクタ {
　ホバー前のスタイル
}
セレクタ:hover {
　ホバー時のスタイル
}

使用例

・ＨＴＭＬ

<div class="main__link link">
  <a href="#">ボタン</a>
</div>
<!-- /.main__link link -->

・ＣＳＳ

.link a {
  display: inline-block;
  padding: 10px;
  border: 1px solid #111;
  transition: all 0.3s;
}
.link a:hover {
  color: #fff;
  background-color: #111;
}

出力結果

ホバー前

ホバー時

まとめ

上記のように、「セレクタ:hover」を用いることで、ホバー時にスタイルが変化させることができます。