HTML字体点击放大伪类实用

经常在网站上面看到一些字体点到之后就会改变字体颜色和变得大一点非常的吸引用户的点击欲望同时呢，这也是作为网站对于可视化的应用，那么如何显现这类效果呢？

其实这都是是属于HTML里的伪类

给未访问过的超链接加红色字体

1、:link 用来表示未访问过的链接（正常链接）

a:link {color: red;}

给访问过的超链接加绿色字体

2、:visited 用来表示访问过的链接

由于隐私的原因，所以visited只能改颜色

a:visited {color: green;}

鼠标移入，链接字体变大到30px

3、:hover 用来表示鼠标移入的状态

a:hover {font-size: 40px;}

鼠标点击后，增加背景色pink

4、:active 鼠标点击后的状态

  div:active{background-color: palegreen;}

这里注意一下

:link :visited只针对超链接a标签

:hover :active 针对所有的标签

具体实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页新闻</title>
</head>
<style>div a {color: rgb(137, 137, 137);text-decoration: none;}.box {width: 500px;height: 600px;background-color: rgb(255, 255, 255);}div .box1 {width: 200px;height: 2px;;border-top: 2px rgb(255, 0, 0) solid;}.box2 {width: 300px;height: 2px;background-color: rgb(255, 255, 255);padding: 2px;border-top: 2px rgb(190, 190, 190) solid;margin: -601px 0px 0px 200px;}.title{/* width: 500px; *//* background-color: red; */}div .mx {font-size: 20px;font-size: 20px;font-weight: 120px;color: rgb(134, 134, 134);margin: 0px 250px;}div .zp img {width: 500px;height: 300px;}div ul {width: 500px;width: 500px;font-family: 'Times New Roman', Times, serif;font-size: 15px;color: rgb(137, 137, 137);overflow: hidden;}ul > li {line-height: 2;width: 100%;white-space: nowrap;}div .zp {transition: all 0.2s linear;width: 500px;height:300px ;overflow: hidden;}.zp>img:hover {transform: scale(1.1);transition: all 0.2s linear;}li:hover a {font-size: 20px;color: rgb(248, 18, 18);}
</style><body><div class="box"><p class="box1"></p></div><div class="box2"></div><div class="title"><h1><span>娱乐·内娱</span><span class="mx"><a href="https://www.163.com/dy/article/CPIAFATF0517HQ7E.html">明星丑闻&nbsp;></a></span></h1><p class="zp"><img src="./zhaopian.png" alt="1"></p></div><div><ul type="square"><li> <a href="https://www.163.com/ent/article/HAK6OFTQ00038FO9.html">谢娜新书分享小女儿百日宴现场 还罕晒三胎孕肚照</a></li><li><a href="https://www.163.com/ent/article/HAK3FKL900038FO9.html"> 张曼玉久违现身当DJ身形消瘦 谢霆锋郭富城在旁围观</a></li><li><a href="https://www.163.com/dy/article/HAI7NB660537B1I5.html">港姐第三轮面试成修罗场！大夏天拿棉服，爆炸头搭配白色长裙</a></li><li><a href="https://www.163.com/dy/article/HAI9RJU70517AET9.html">43岁冯绍峰街头跑步无人识，不戴口罩似遛弯大爷，爱抽烟状态憔悴</a></li></ul></div>
</body></html>

HTML字体点击放大伪类实用相关推荐

css伪类扩大点击区域
今天测试提了个bug,模态窗口关闭按钮的X太小(其实严重怀疑是测试手指太过粗大............) 言归正传,先上图如图所示,这个X比较小,对于移动端而言,可能用户老点不到(姑且当点不到吧). ...
html之CSS设计（CSS伪类、优先级、字体属性、背景属性）
文章目录一.CSS伪类二.CSS优先级三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重
`## CSS入门基础(二) 字体样式字体类型 font-family 字体大小 font-size 字体粗细 font-weight 100-700 400=normal 700=bold 字体得 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
Web前端线上系统课-01-HTML+CSS/08-结构伪类-图形-字体-字体图标-元素定位
结构伪类-图形-字体-字体图标-元素定位结构性伪类选择器 nth-child 父元素中的第n个子元素 nth-child(n) <!DOCTYPE html> <html lang ...
html鼠标点击伪类,CSS伪类：CSS3鼠标滑过按钮动画
前言按钮,对开发者而言,是非常常见的一个功能.前端通常会对按钮加入一些操作交互样式,增加一些用户体验. 比如:hover样式.点击样式.loading样式等.下面我们通过简单示例在学习一下css3动 ...
html复选框不可修改,如何用【伪类】成功修改HTML checkbox默认样式？（新checkbox覆盖老checkbox无法点击的问题）...
按照一篇博客上的指导,修改checkbox默认样式: (博客地址: https://www.cnblogs.com/GumpY... ) 效果图: 按照博客,我的意图是: 1-把原checkbox 的 ...
html点击出现对勾,css伪类右下角点击出现对号角标表示选中的代码
效果: css: .s_type { border: none; border-radius: 5px; background-color: #f3f3f3; padding: 7px 0; colo ...
html父级添加伪类after,关于伪类after后续追加，实现js事件（如点击事件）
实现情况为:点击"编辑"后,"编辑"文字变成"完成",再点击伪类元素后的"完成",此时的"完成"应该 ...

HTML字体点击放大伪类实用

HTML字体点击放大伪类实用相关推荐

最新文章

热门文章