如何在纯 CSS 中创建带有悬停图像的链接

* 更新说明:这篇文章首次发表于 2009 年 10 月。我提到的一些技术可能已经过时了。 请参阅本指南以了解最新的网站创建技术。 什么是悬停? 定义引用自 UWStout.edu: “悬停”是当您将光标放在任何类型的链接上时发生的效果。 可以对链接进行编码,以通过更改颜色、显示新图形甚至播放声音文件来响应悬停。 悬停效果提高了 Web 可用性并帮助 Web 所有者引导他们的 Web 流量。 当您希望您的网络用户特别关注一个特殊链接时,一个好方法是创建一个具有吸引人的悬停效果的链接。 像这样的简单悬停效果(简单的下划线和文本颜色的变化)表明这些文本是“可点击的”并改善了网络交互。 但是,更改文本颜色和样式(下划线/上划线/粗体)是非常基础的,并且可以通过悬停来完成更多工作。 在本文中,我将展示如何创建具有悬停效果的漂亮链接。 示例 1:带有悬停按钮的链接 首先,看一下工作示例(将鼠标放在链接上以查看它是如何工作的——更改侧面的图标)。 示例 1 – 带有悬停按钮图像的链接 这是将在本示例中构建的完整版本。 我们如何在纯 CSS 中创建它? 按钮图像 第 1 步,如您所见,我们需要两个不同版本的箭头图标。 在我们的示例中,我使用红色 (#CC3300) 作为默认链接按钮; 和灰色 (#333333) 用于悬停效果。 可以使用任何图像编辑软件轻松制作此类按钮。 我们现在有了红色按钮(比如 b1.png)和 rey 颜色(按钮比如 b2.png)。 将这两个合并为一个图像文件,b1.png 在 b2.png 之上。 这将是链接的最终图像。 … Read more如何在纯 CSS 中创建带有悬停图像的链接