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

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


* 更新说明:这篇文章首次发表于 2009 年 10 月。我提到的一些技术可能已经过时了。 请参阅本指南以了解最新的网站创建技术。

什么是悬停? 定义引用自 UWStout.edu

“悬停”是当您将光标放在任何类型的链接上时发生的效果。 可以对链接进行编码,以通过更改颜色、显示新图形甚至播放声音文件来响应悬停。

悬停效果提高了 Web 可用性并帮助 Web 所有者引导他们的 Web 流量。 当您希望您的网络用户特别关注一个特殊链接时,一个好方法是创建一个具有吸引人的悬停效果的链接。 像这样的简单悬停效果(简单的下划线和文本颜色的变化)表明这些文本是“可点击的”并改善了网络交互。 但是,更改文本颜色和样式(下划线/上划线/粗体)是非常基础的,并且可以通过悬停来完成更多工作。

在本文中,我将展示如何创建具有悬停效果的漂亮链接。

示例 1:带有悬停按钮的链接

首先,看一下工作示例(将鼠标放在链接上以查看它是如何工作的——更改侧面的图标)。

示例 1 – 带有悬停按钮图像的链接

这是将在本示例中构建的完整版本。

我们如何在纯 CSS 中创建它?

按钮图像

第 1 步,如您所见,我们需要两个不同版本的箭头图标。 在我们的示例中,我使用红色 (#CC3300) 作为默认链接按钮; 和灰色 (#333333) 用于悬停效果。 可以使用任何图像编辑软件轻松制作此类按钮。

我们现在有了红色按钮(比如 b1.png)和 rey 颜色(按钮比如 b2.png)。 将这两个合并为一个图像文件,b1.png 在 b2.png 之上。 这将是链接的最终图像。 命名它(例如,x.png)并上传所需的位置(就我而言,我将它放在我的 WP 模板文件夹中)。

供你参考:

b1.png

b2.png 和 x.png

CSS 代码

接下来,关于 CSS 代码。 基本上我们想要实现的是将链接文本稍微向右缩进,为按钮腾出空间; 同时,当链接处于悬停状态时,显示不同的图像。 这些都是非常基本的东西,除了我们需要对背景位置进行一些改动。 诀窍是显示原始链接的图像顶部(红色按钮); 悬停时,将背景图像替换为 -11px(在您的网站上可能会有所不同)边距以显示灰色按钮。

.x a {
 color: #cc3300;
 padding-left: 14px;
 font-weight: bold;
 background-image: url(images/x.png);
 background-position: 0 2px;
 background-repeat: no-repeat;
 }
.x a:hover {
 color: #333333;
 padding-left: 14px;
 font-weight: bold;
 background-image: url(images/x.png);
 background-position: 0 -11px;
 background-repeat: no-repeat;
 }

执行

要展示这种悬停效果,只需将类 x 插入指定区域即可。 这是一个关于如何做到这一点的示例。

<p class="x"><a href="http://www.webhostingsecretrevealed.com">Homepage</a></p>

示例 2:悬停背景中的链接

使用相同的概念,有无数种方法可以使您的链接看起来很酷。 这是另一个示例,说明我们可以使用稍微不同的方法来处理悬停效果。 再次,看看完成的版本。

示例 2 – 悬停背景中的链接

在这个例子中,我要做的是创建一个类似按钮的超链接,当用户将鼠标放在它上面时,背景会发生变化。

我们如何在纯 CSS 中创建它?

背景图像

首先,创建两个圆角矩形图像。 出于演示目的,我们不会在此示例中合并这两个图像。 我们将红色 (#CC3300) 矩形命名为 b1.png; 栗色 (#9F2800) 矩形为 b2.png。

CSS 代码

接下来,这是您的样式表的代码(在第二个示例中,我们将类命名为“y”)。

a.y {
 width: 280px;
 height: 42px;
 color: #000000;
 padding: 10px;
 text-decoration:none;
 display: block;
 font-weight: bold;
 background-image : url(images/b1.png);
 background-repeat: no-repeat;
 }
a.y:hover {
 width: 280px;
 height: 42px;
 color: #FFFFFF;
 padding: 10px;
 font-weight: bold;
 text-decoration:none;
 display: block;
 background-image : url(images/b2.png);
 background-repeat: no-repeat;
 }

执行

要显示链接,只需将类 (y) 插入源代码中的 标记。 例子:

<a href="http://www.webhostingsecretrevealed.com" class="y" >Homepage</a>

包起来

我希望这篇文章能给你带来有价值的信息,并启发你们中的一些人以创造性的方式使用 CSS。 如果您认为我应该在本指南中添加任何其他要点,请随时在评论部分留下您的想法。

Leave a Comment