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

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

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

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

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

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

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

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

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

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

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

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でマウスオーバー時に文字･ボタン･画像の色を変える方法でした。