远程链接

远程链接是我对单个锚链接在不同位置具有多个可点击区域的称呼。 它可以用于非常巧妙的效果，并且只需要 CSS。

这不是一个全新的想法，事实上我之前已经 介绍过，但我认为我会为你们整理一个更“现实”的例子。

查看演示   下载文件

 

如何实现

没什么难的，只需将您想要作为可滚动区域的一部分的所有内容放在单个锚链接中。 就像这样

<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="images/blog-toby_young_0.jpg" alt="Toby Pic" class="photo" />
</a>

现在我们有了所有需要的钩子来定位不同的部分并做我们需要做的事情。 当然，对文本应用一些样式和定位，但更重要的是，定位图像本身并使用绝对定位将其拉开。

以下是所有涉及的 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 .name		{ font: 18px Georgia, Serif; }
a:hover .name		{ color: #900; font-weight: bold; } 
a:hover img		{ border: 5px solid #222; margin: -4px; }
#toby img   		{ top: 0; left: 0; }
#tom img		{ top: 0; left: 134px; }
#gail img		{ top: 134px; left: 0; }
#padma img		{ top: 134px; left: 134px; }

示例中的图片和文字来自 Bravo 的 顶级大厨.