html超链接字体鼠标悬停颜色改变效果

原创 反重力源  2021-09-08 16:12  阅读 185 次
阿里云免费代金券,购买阿里云产品前先领券更优惠!

网页上常见的鼠标滑过或悬停字体变色,能给用户一个很好的体验效果。如何制作鼠标滑过字体变色,可以通过css提供了鼠标滑过伪类选择器(:hover)对样式进行修改。

a{ color:#0D66E3 } /* 超链接默认颜色蓝色 */
a:hover{color:#E30D0D} /* 超链接默认颜色蓝色 */

上述可以了解默许超链接字体色彩为蓝色“color:#0D66E3”,鼠标悬停时字体色采为深红色“ E30D0D}”。可见要旋转鼠标悬停色彩就设置a:hover。

示例代码:

<!--DOCTYPE html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>鼠标悬停颜色改变实例</title>
<style>
a{color:#0D66E3} /* 默认网页超链接颜色蓝色 */
a:hover{color:#E30DB5} /* 默认网页超链接悬停颜色粉红色 */
.zhiding a{ color:#0D66E3 } /* 指定对象超链接默认颜色蓝色 */
.zhiding a:hover{color:#E30D0D} /* 指定对象超链接悬停颜色颜色深红色 */
</style>
</head>
<body>
<p>欢迎来到<a href="http://www.fzlyblog.cn/">听海風说</a>为默认网页超链接</p>
<p class="zhiding">此处为<a href="https://www.fzlyblog.cn">指定对象超链接</a>下一指定对象<a href="https://www.fzlyblog.cn">超链接</a> </p>
</body>
</html>

设置两种体现情况代码说明:

  • 默认网页:设置装备摆设默认网页超链接字体为蓝色,鼠标悬停时是粉红色(a{ color:#0D66E3}  a:hover{color:#E30DB5
  • 指定对象:设置指定对象内超链接字体默许为绿色,鼠标悬停时字体色调为深红色。.zhiding a{ color:#0D66E3 } .zhiding a:hover{color:#E30D0D}

效果如下:

除此之外还可以利用a:hover实现指定文本链接字体加粗{font-weight:bold}、字体大小{font-size:30px}等样式

本文地址:https://fzlyblog.cn/183/
版权声明:本文为原创文章,版权归 反重力源 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了
【腾讯云】买云服务器,参与礼品兑换、抽奖,最高送价值8000元IPad,还有Bose耳机、千元京东卡等您来!

发表评论


表情