へっぽこデザイン備忘録〜CSSだけでオンマウスした時に画像と文字の色を同時に変える方法〜
CSSだけでオンマウスした時に画像と文字の色を同時に変える方法
よく見かけるやつです。
簡単で割りと使うんですが、1発で成功しなくて、あれ、なんでだっけ・・・?とよく時間を取られます。
なので、今回は忘れないようにコードを貼り付けておきます!!
サンプル
コード全体
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/*-------------------- このデザインの為の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; } |
これでオッケー!
画像は正確には色を変更しているのではなく、画像の透明度を変えています。
今回はサンプルの下地が暗い色のため、オンマウスすると下地が透けて画像が暗く見えます。
明るくしたい場合は、白など明るい色の下地にしてください。
キングスマン続編楽しみだ〜。
The following two tabs change content below.
マーシー武田
筋トレを趣味にすることが趣味。
最新記事 by マーシー武田 (全て見る)
- 岩井俊二の伝説的ドラマ『打ち上げ花火、下から見るか?横から見るか?』大根仁×新房昭之でアニメ映画化!声優には宮野真守、広瀬すず、菅田将暉… - 2016/12/08
- 参考にしたい最新ランディングページ5選〜2016年冬版〜 - 2016/12/06
- れんこんサミットって何!?11月17日はレンコン記念日!今夜はレンコン料理で決まり!! - 2016/11/16