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

文章撰写者:
  • 网站设计
  • 更新:Aug 02,2013

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

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

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

在本文中,我将展示如何使用悬停效果创建外观漂亮的链接。

示例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(可能在您的网站上有所不同)边距替换背景图像以显示灰色按钮。

.xa {color:#cc3300; padding-left:14px; font-weight:bold; background-image:url(images / x.png); background-position:0 2px; background-repeat:no-repeat; }
.xa:悬停{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">主页</a> </ p>

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

使用相同的概念,您可以通过无尽的方式使链接看起来很酷。 这是另一个关于我们如何使用稍微不同的方法处理悬停效果的示例。 再看看完成的版本。

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

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

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

背景图片

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

CSS代码

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

ay {width:280px; 身高:42px; 颜色:#000000; 填充:10px; 文字修饰:无; 显示:块; font-weight:bold; background-image:url(images / b1.png); background-repeat:no-repeat; }
ay:hover {width:280px; 身高:42px; 颜色:#FFFFFF; 填充:10px; font-weight:bold; 文字修饰:无; 显示:块; background-image:url(images / b2.png); background-repeat:no-repeat; }

实践

要显示链接,只需将类(y)插入源代码中的<a href>标记即可。 例:

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

结束了

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

更多CSS教程

如果您喜欢这篇文章,请务必查看 如何充分利用CSS 3动画, 必须阅读CSS 3教程2012, 以及 使用这些CSS 3技术让您的网站更酷.

关于Jerry Low

WebHostingSecretRevealed.net(WHSR)的创始人 - 100,000用户信任和使用的托管评论。 超过15在网络托管,联盟营销和SEO方面的多年经验。 ProBlogger.net,Business.com,SocialMediaToday.com等的贡献者。