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

test_img

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


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

コード全体

html

css


これでオッケー!


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


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

関連記事

コメントは利用できません。

ピックアップ記事

  1. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-27-19-21-10

    2016-12-27

    【正月特番!!!】2017年のお正月に見たほうがよい番組はこれ!!!!

    出典:http://www.tv-tokyo.co.jp/oogui/ 2017年のお正月、数々の特…

ピックアップ記事

  1. 自由の女神

    2015-9-18

    アメリカでサルバドール・ダリを見てきました。

    こんにちは!9月5日〜11日までアメリカに行ってきました。ツアーの詳細を全く確認せずに旅だったので、…

ピックアップ記事

  1. IMG_3517

    2016-7-17

    京都ダリ展に行って来ました

    7/1(金)から京都市美術館で開催している、 ダリ展に行ってきました。【過去のダリ展記事】 [blo…
ページ上部へ戻る
Top