175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

如何用CSS隐藏链接进行有趣的互动

2019-10-21 来源:小领

使用CSS隐藏链接可以通过多种方法来完成,但是我们将研究两种可以完全隐藏URL的方法。如果要在网站上创建寻宝游戏或彩蛋,这是一种隐藏链接的有趣方法。

一种方式是将链接display设置成none,以便隐藏掉链接。另外一种方法是简单地为链接文本设置成和背景一样的颜色。如果有人检查HTML源代码,则这两种方法都不会隐藏链接。但是,访问者一般都不会查看它,而您的新手访问者也不会知道如何找到链接。我们可以用来隐藏URL的第一种方法是使链接不执行任何操作。当鼠标悬停在链接上时,它不会显示URL指向的内容,也不会让您单击它。您可以在JSFiddle上看到此方法的实际作用。如果您在此处删除CSS代码,然后重新运行数据,则该链接突然变得可单击且可用。这是因为未应用CSS时,链接的行为正常。


更改链接的颜色。通常,网页设计师会将超链接设置为与背景不同的颜色,以便访问者可以看到它们并知道它们的去向。但是,我们在这里隐藏链接,所以让我们看看如何更改颜色以匹配页面的颜色。

定义自定义类。如果我们使用上面第一个方法中的相同示例,则可以简单地将类更改为所需的类,以便仅隐藏特殊链接。如果我们不使用类,而是从下面将CSS应用于每个链接,那么所有链接都将消失。这不是我们想要的,因此我们将使用使用自定义hideme 类。在输入适当的CSS代码以隐藏链接之前,我们需要弄清楚我们要使用哪种颜色。如果您已经有坚实的背景,例如白色或黑色,那很容易。但是,其他特殊颜色也必须准确。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=289
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976