画像のロールオーバー効果をCSSで簡単実装する方法:phpspot開発日誌

Simple CSS Image Rollover - Find Motive Back when I first started doing web development I used Javascript Image objects and onMouseOver and onMouseOut to make image rollovers for web pages. This worked well, but was kind of clunky and required 2 separate images. 画像のロールオーバー効果をCSSで簡単実装する方法。 特に真新しいものではないと思いますが、知らない人も多いような気がしたので紹介します。 anchorタグのhover 時に背景画像をずらすという手法です。 コードはCSSとHTMLそれぞれ次のように記述します。 /* CS

[webmarksjp]

cssdesign

[kaonore]

css rollover

[kazukittyo]

php design css tips web

[atsu6630]

CSS ロールオーバー

[DocSeri]

ずらすのではなく2枚を入れ替えてもOK