什么是远程链接？
远程链接是一种影响页面上另一个对象的悬停效果。悬停效果也可以影响自身。这可以通过使用 **纯 CSS** 来实现，使其成为一种非常酷且轻量级的技术。
在这个 示例 中，您将看到一行横向排列的彩色圆圈，以及下方列出它们的名称。将鼠标悬停在圆圈上将同时突出显示圆圈和名称。同样，将鼠标悬停在名称上也将同时突出显示圆圈和名称。
您可以看到代码只是一个非常简单的无序列表，每个列表项都附加了唯一的 ID。当然，CSS3 将使此操作更容易，并且无需唯一的 ID，但那是另一个话题了……
<ul>
<li id="red"><a href="#"><em>Red</em></a></li>
<li id="yellow"><a href="#"><em>Yellow</em></a></li>
<li id="orange"><a href="#"><em>Orange</em></a></li>
<li id="green"><a href="#"><em>Green</em></a></li>
<li id="blue"><a href="#"><em>Blue</em></a></li>
</ul>然后，您为列表项提供一些关于大小和位置的通用信息。每个特定的列表项都获得一些关于背景图像和 em 元素放置位置的额外信息。
ul li a {
width: 100px;
height: 100px;
display: block;
}
ul li a em {
position: relative;
}
ul li#red a {
background: url(images/red.gif) bottom center no-repeat;
}
ul li#red a:hover {
background-position: top center;
}
ul li#red a em {
top: 150px;
}这里的真正技巧是为锚点内的 em 元素设置相对定位，然后使用 top/bottom/left/right 坐标将其偏移。这使所有内容都保留在一个锚点元素内，这就是为什么悬停效果会自动作用于这两个元素的原因。我喜欢这种技术，它让我感到非常兴奋。=)
前几天，在阅读完您的帖子“感兴趣的链接”后，我观看了 Doug Bowman 的视频“CSS 之美”。他谈到了这些远程悬停效果，我认为它们很棒，并决定为此进行一些研究。
并且由于我订阅了您的 RSS Feed，我看到了您的示例。
它很棒，非常感谢，您的教程非常易于理解且非常直接。
此致
我想对您的 CSS 提出一条建议；
而不是写
ul li#blue a {}
ul li#blue a:hover {}
ul li#blue a em {}
您可以写成
#blue a {}
#blue a:hover {}
#blue a em {}
此致
@Volkan：是的，这完全是我获得此帖子想法的地方。我认为这看起来真的很整洁，并且以前从未尝试过这样做。此外，您的 CSS 建议听起来很合理，并且会使代码更简洁一些——无论哪种方式都没有坏处。
嗯，确实很棒。刚刚查看了代码，它非常简洁和巧妙，但又非常简单。
但是，我对您将此技术用于何处有点困惑。有什么有用的想法吗？
在获得此想法的视频中，Doug Bowman 以一种非常酷的方式使用了它。他将几个人的黑白照片水平排列，并在下方列出他们的姓名。当您将鼠标悬停在照片上时，它们会变成彩色，并且他们的姓名会高亮显示。
他还以另一种更有趣的方式使用了它。他在页脚中有一个链接到他正在使用的托管服务提供商。他希望在页面右上角也有相同的链接。因此，他将一个 em 元素放在该链接内，并为 em 设置绝对定位，将其放置在右上角。同一个链接，两个位置。这非常酷，并且也有助于保持页面轻量级。
我建议使用一段简单的代码
a {
outline:none;
}
否则，在点击气球时我们会看到一个丑陋的轮廓边框。
所以如果页面上同一个链接出现了两次，使用此功能会很有用吗？
@Oriol：是的！这是一个很好的建议。我实际上一直想知道是否有办法消除这些愚蠢的线条。尤其是在浮动对象时，它们真的很讨厌。我只是完全没有注意到那个 CSS 属性。
@Jermayn：这基本上就是重点。但在您希望两个链接都执行相同操作的情况下，它最有用，而不仅仅是它们是同一个链接。实际上，此技术可以用于使用同一个锚点元素来控制页面上 3、4、5 个，实际上是无限数量的对象。
嗨，Chris，
我在我的一个项目中使用了这种技术。我想到了一个关于更轻量级 CSS 文件的建议。
由于每个 a 和 a:hover 的 background-position 和 background-repeat 值都相同，我们可以将它们组合为
ul li a {
background-position:bottom center;
background-repeat:no-repeat;
}
ul li a:hover {
background-position:top center;
}
我们可以将代码更改为
ul li#red a {
background-image: url(images/red.gif)
}
ul li#red a em {
top: 150px;
}
差异是 1.50KB 变为 1.32KB :D
顺便说一句，
当我下载示例时，它缺少其打开的 html 标签。
根据当前模式，链接标签不应自闭合。
最后，IE6 没有显示您的 POSTComment 按钮（至少对我来说是这样）
@Volkan：您对本示例的这两个想法都非常到位。这确实是您利用 CSS 的“层叠”部分来帮助保持代码轻量级的方式。感谢您指出打开的 html 标签，我现在已在页面和下载文件中修复了它。
关于 IE 中的按钮……我不太担心它，我想这算是使用 Firefox 的一个小福利。您在 Safari 中也无法获得它，因为 Safari 使用默认按钮。