CSSだけでオンマウスした時に画像と文字の色を同時に変える方法

よく見かけるやつです。
簡単で割りと使うんですが、1発で成功しなくて、あれ、なんでだっけ･･･？とよく時間を取られます。
なので、今回は忘れないようにコードを貼り付けておきます！！
サンプル

コード全体

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>


<div class="test_wrap"> <!-- 全体を覆うdiv -->
  <a href="#"> <!-- 画像とタイトルをaタグで覆う -->
    <img src="test_img.jpg"> <!-- サムネイル画像 -->
    <p>Manners maketh man...</p> <!-- タイトルテキスト -->
  </a>
</div>


</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p>Manners maketh man...</p>

</a>

</div>

</body>

</html>

css

/*--------------------
このデザインの為のCSS(不要)
--------------------*/
body { 
  width: 100%;
  font-family: "Times New Roman";
}
img{
  width: 100%;
}
.test_wrap{
    width: 400px;
    margin: 0 auto;
    text-align: center;
    background-color: #161d22;
    border: solid 4px #161d22;
}



/*--------------------
色が変わるCSS(必要)
--------------------*/
.test_wrap a{
  text-decoration: none; /*リンクの下線を消す*/
}
.test_wrap a p{ /*タイトル　標準時*/
  color: #818887;
  margin: 3px 0px;
  font-size: 18px;
}
.test_wrap a:hover p{ /*タイトル　オンマウス時*/
  color: #bbbab1;
}
.test_wrap a:hover img{ /*画像*/
  filter:alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

/*--------------------

このデザインの為のCSS(不要)

--------------------*/

body {

width: 100%;

font-family: "Times New Roman";

}

img{

width: 100%;

}

.test_wrap{

width: 400px;

margin: 0 auto;

text-align: center;

background-color: #161d22;

border: solid 4px #161d22;

}

/*--------------------

色が変わるCSS(必要)

--------------------*/

.test_wrap a{

text-decoration: none; /*リンクの下線を消す*/

}

.test_wrap a p{ /*タイトル　標準時*/

color: #818887;

margin: 3px 0px;

font-size: 18px;

}

.test_wrap a:hover p{ /*タイトル　オンマウス時*/

color: #bbbab1;

}

.test_wrap a:hover img{ /*画像*/

filter:alpha(opacity=60);

-moz-opacity: 0.6;

opacity: 0.6;

}

これでオッケー!

画像は正確には色を変更しているのではなく、画像の透明度を変えています。
今回はサンプルの下地が暗い色のため、オンマウスすると下地が透けて画像が暗く見えます。
明るくしたい場合は、白など明るい色の下地にしてください。

キングスマン続編楽しみだ〜。

この記事を書いた人
最新の記事

マーシー武田

筋トレを趣味にすることが趣味。

へっぽこデザイン備忘録〜CSSだけでオンマウスした時に画像と文字の色を同時に変える方法〜

CSSだけでオンマウスした時に画像と文字の色を同時に変える方法

コード全体

マーシー武田

最新記事 by マーシー武田 (全て見る)

関連記事

6秒でユーザを楽しませる～ Vine ～

【WordPress移管】最高に簡単・便利なプラグイン「Dupl…

NO MORE ホイホイ

お世話になっている「Webツール」

2014年をNPO動画で振り返る

ピックアップ記事

ピックアップ記事

気軽に芸能人気分が味わえる!!芸能人が愛するロケ弁３選!!!

ピックアップ記事

【Report１】IMフォーラム★ゴールドスポンサーとして協賛＆登壇

ピックアップ記事

【売れっ子への道渋滞中】若手芸人高齢化について考える。其の一

へっぽこデザイン備忘録〜CSSだけでオンマウスした時に画像と文字の色を同時に変える方法〜

CSSだけでオンマウスした時に画像と文字の色を同時に変える方法

コード全体

マーシー武田

最新記事 by マーシー武田 (全て見る)

関連記事

人気記事ランキング

ピックアップ記事

ピックアップ記事

ピックアップ記事

ピックアップ記事