【CSS】マウスカーソルを載せると、コンテンツの色や形を変える方法
HTML&CSS

【CSS】マウスカーソルを載せると、コンテンツの色や形を変える方法

作成日:2021年06月26日
更新日:2021年06月26日

ウェブサイト制作で、マウスカーソルをボタンなどのコンテンツに乗せた時、アニメーションを追加したくなること、ありませんか?

今回は、マウスカーソルを載せると、コンテンツの色や形を変える方法を紹介します。

基本のコードは、以下になります。

html
<h1>今日の天気は?</h1>
<button class="button">晴れ</button>
<button class="button">その他</button>
css
button {
margin: 8px;
padding: 4px 32px;
font-size: 24px;
background-color: ivory;
border: 1px solid #666;
border-radius: 8px;
}

image2

マウスカーソルを乗せた時、何か変化するようにするには、変化させたいコンテンツの CSS に:hoverという擬似クラスを追加します。

例えば、ボタンの色を変えたい場合は、

css
button:hover {
background-color: lightskyblue;
}

とします。

ブラウザで確認すると、

image3

マウスカーソルを乗せたボタンの色が変わりました。

:hoverのアニメーションは、opacity: 0.8;くらいがちょうどいいかもしれません。

css
button {
margin: 8px;
padding: 4px 32px;
font-size: 24px;
color: white;
background-color: darkblue;
border: 1px solid #666;
border-radius: 8px;
}
button:hover {
opacity: 0.8;
}

image4

マウスカーソルが上に乗ると、不透明度が上がるようにしました。

さりげないアニメーションを追加したい場合、ぜひ試してみてください。

© 2024あずきぱんウェブスタジオ