hover疑似クラスで(マウスが載った際に)リンク画像を切り替える - スタイルシートTipsふぁくとりー
《2016年2月3日 16:07 公開/更新》 hover疑似クラスで(マウスが載った際に)リンク画像を切り替える [イメージ,リンク,配置] 画像リンク(＝リンクになっている画像)の上にマウスポインタを載せたときに、マウスポインタが載っている間だけ別の画像に差し替えるデザインがよくあります。そのような「マウスが載ったときに画像を切り替える」機能は、JavaScriptなどのスクリプトを活用することなく、スタイルシートだけで作れます。 「要素の上にマウスポインタが載ったとき」の装飾は、hover疑似クラスを使うことで指定できます。つまり、hover疑似クラスを使って画像を切り替えれば良いわけです。ただ、表示する画像ファイルそのものを切り替えるよりも、背景画像の表示領域をずらすことで「画像が切り替わったような効果を出す」テクニックの方が、(切り替え先の画像の読み込みを待たずに済む分)動作が高
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
