html･CSSでマウスオーバー時に色を変える方法
html･CSSでマウスオーバー時に色を変える方法

html･CSSでマウスオーバー時に色を変える方法

html･CSSでマウスオーバー時に色を変える方法 2020年02月18日

マウスオーバー時に要素を変化させるとクリックできることがわかったり、スペースの節約ができたりします。

この記事ではそんなhtml･CSSでマウスオーバー時に文字･ボタン･画像の色を変える方法を紹介します。

目次

  • マウスオーバー時に変化させる方法
  • マウスオーバー時に文字の色を変える方法
  • マウスオーバー時にボタンの背景色を変える方法
  • マウスオーバー時に画像の色を変える方法
    • 方法1.画像を半透明にして背景を見せる
    • 方法2.画像の上の要素を透明から半透明に変える
  • まとめ

マウスオーバー時に変化させる方法

セレクタに「:hover」を付けるとマウスオーバー時に変化させることができます。

A{ 基本のCSS } A:hover{ マウスオーバー時に追加、上書きしたいCSS }

また、「transition」を指定すると変化にアニメーション（時間をかけて変化）をかけることができます。

少しおしゃれになります。

hoverがうまくいかないときは下記記事を参考にしてください。

CSSでaタグのhoverが効かない･文字色が変わらない原因と修正方法hoverを使うとaタグの文字の色など変えることができます。しかしちょっとしたことでhoverがうまく効かないことがあります。CSSでaタグのhoverが効かない･文字色が変わらない原因と修正方法を解説します。この記事を読む

では以下より具体例を紹介します。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

マウスオーバー時に文字の色を変える方法

aタグなどのリンクでは文字の色を変えることがあります。

CSSの「color」を指定することで実現可能です。

完成イメージ

文字の色を変える <style> .text:hover{ color: red; } </style> <a href="#" class="text">文字の色を変える</a>

マウスオーバー時にボタンの背景色を変える方法

CSSの「background」を指定することでボタンの背景色を変更することができます。

色の変化が大きいことで気づきやすくなります。

完成イメージ

ボタンの背景色を変える <style> .ex-button{ border: 1px solid #333; padding:10px; background: #f2f2f2; display: inline-block; font-weight: bold; transition: .3s; } .ex-button:hover{ background: yellow; } </style> <a href="#" class="ex-button">ボタンの背景色を変える</a>

マウスオーバー時に画像の色を変える方法

方法1.画像を半透明にして背景を見せる

完成イメージ

html

<ul class="over"> <li> <img src="https://csshtml.work/wp-content/uploads/1.jpg"> </li> <li> <img src="https://csshtml.work/wp-content/uploads/2.jpg"> </li> <li> <img src="https://csshtml.work/wp-content/uploads/3.jpg"> </li> </ul>

CSS

ul.over{ list-style: none; display: flex; justify-content:space-around; margin: 0; padding: 0; } .over li{ background: #000; } .over img{ width: 30%; height: auto; display: block; opacity: 1; transition: .3s; } .over li:hover img{ opacity: 0.5; }

マウスオーバーすると画像が半透明になります。

画像の親要素のliに色がついているためその色がうっすら見えます。

ulにdisplay: flexを指定しているので、子要素であるliは内容（画像）に合わせてサイズが最小限になります。display: flexをつかわないのであれば、liにdisplay:inline-blockを指定してもOKです。

方法2.画像の上の要素を透明から半透明に変える

完成イメージ

  • テキスト
  • テキスト
  • テキスト

html

<ul class="over"> <li> <img src="1.jpg"> <div>テキスト</div> </li> <li> <img src="1.jpg"> <div>テキスト</div> </li> <li> <img src="1.jpg"> <div>テキスト</div> </li> </ul>

CSS

ul.over{ list-style: none; display: flex; justify-content:space-around; margin: 0; padding: 0; } .over li{ position: relative; width:30%; } .over img{ height: auto; width: 100%; display: block; } .over div{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0); opacity: 0; left: 0; top: 0; display: flex; justify-content: center; align-items: center; color: #FFF; transition: .3s; } .over li:hover div{ background: rgba(0,0,0,0.5); opacity: 1; }

方法1では画像を半透明していました。

方法2では画像を半透明にせず、画像にかぶせる要素を半透明にします。

画像の上に半透明の四角（div）が乗っている状態です。

divを乗せるにはdisplay:absoluteを使います。

それから、マウスオーバーしていないときは文字を表示させないためにdiv全部をopacityで透明にします。

マウスオーバーしたとき、文字をはっきり表示させたいのでopacity:1にします。背景は半透明にしたいのでrgbaで指定します。

まとめ

マウスオーバー時に変化させる方法

セレクタに「:hover」を付けるとマウスオーバー時に変化させることができる。

マウスオーバー時に文字の色を変える方法

「color」を指定する。

マウスオーバー時にボタンの色を変える方法

「background」を指定する。

マウスオーバー時に画像の色を変える方法

画像と色付きのdivを重ねて上にある方を半透明にします。

以上、html･CSSでマウスオーバー時に文字･ボタン･画像の色を変える方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む CSSやhtmlをマンガで学ぶ
📎📎📎📎📎📎📎📎📎📎