リンク要素から離れた要素のhoverを実現する方法

Remote Linking （別窓）

このRemoteLinkingという手法では、リンク要素から離れた要素のhoverを実現することが出来ます。
デモは以下から。
Remote Link （別窓）

リンク要素から離れた要素のhoverを実現と書きましたが、実際は要素同士は一つのaタグで囲まれています。
具体的には以下のような感じです。

<div class="people">
<a href="#toby" id="toby">
<span class="name">Toby Yong</span><br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
<img src="画像のURL" alt="Toby Pic" class="photo" />
</a>
</div>

これに対して以下のようなCSSを適用します。

.people { position: relative; }
a { text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; display: block; position: absolute; }
a:hover { background: #ffefcd; }
a:hover img { border: 5px solid #222; margin: -4px; }
#toby img { top: 0; left: 0; }

何をしてるかというと、まずdiv.peopleにposition:relativeを指定し、位置を絶対指定したときの基準を決めます。
次にa要素に対してmargin:0 0 0 270を指定し、デモでいうところの名前と説明が表示される場所を指定します。
270という数字はこのデモでは画像が125px、borderが5+5で10px、それを横方向に二つ並べるので270pxが確保されています。
なのでこの値はご自身の用意する画像に合わせて調整してください。
そして最後にa要素の中のimg要素に対してdiv.peopleを基準とした絶対位置を指定して完成というわけです。

CSSだけで実現出来るなかなかスマートな方法だと思います。おためしあれ。