css - CSS を使用してホーミング時に画像領域を強調表示する

Question

このようなマップ/フロア プランの特定の領域を強調表示するための HTML CSS ソリューションは何ですか?

http://www.centrecourtshopping.co.uk/store-info/

Answer 1

スプライト画像を使用しています こちら をご覧ください。

基本的には、次のように機能します。

1. 濃い青色の領域を持つマップは完全に静的です。
2. その上に、小さな長方形でできた目に見えない層があります。<a>それぞれが単一の濃い青色の領域に対応し、独自のid.
3. カーソルが長方形の上に置かれるとid x、スプライト画像がその背景とうまく整列します (CSS の を設定することによりbackground-position)。

この魔法は JavaScript を使わなくても実現できるとは思わないでください。