列表中不限制宽度,hover时,字体font-weight:bold,防止抖动
项目一个小问题困扰了很久,在一个没有限制宽度的列表容器中,如果给hover时,给字体➕‘font-wieght:bold’容器就会变宽,然后移动的下一个容器,就会出现抖动,这样很是影响用户体验,于是在网上各种搜解决这种缺陷的方法,终于找到这种隐藏伪类的方法,觉得是个不错的技巧,原文一,
原文二
li, a {
display:inline-block;
text-align:center;
font: normal 14px Open Sans;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
a::after {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
html
<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>
列表中不限制宽度,hover时,字体font-weight:bold,防止抖动的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式。
当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式.比如 select * from T_Employee where FNumber not in ( select top 5* ...
- 【纯css】左图右文列表,左图外框宽度占一定百分比的正方形,右上下固定,右中自动响应高度。支持不规则图片。
查看演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- windows7下系统保护中出现错误“文件名、目录名或卷标语法不正确。(0x8007007B)“ 以及保护设置列表中出现“Windows7_os(c:)(找不到)”选项时的解决方法
windows7下系统保护功能很是鸡肋,有事会出现一下两个问题: 1.出现错误“文件名.目录名或卷标语法不正确.(0x8007007B) 2.保护设置列表中出现“Windows7_os(c:)(找不到 ...
- 仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表中为标识列指定显式值问题
今天在处理数据库过程中碰到这样的问题在插入一条数据到表中 系统报这样的错误 仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表中为标识列指定显式值问题 表有一列是自增长的 ...
- python中循环删除列表中元素时的坑!
循环删除列表中元素时千万别用正序遍历,一定要用反序遍历! 废话不多说,先上案例代码: def test(data): for i in data: data.remove(i) return data ...
- IN 查询时出现ORA-01795:列表中的最大表达式数为1000解决方法
问题描写叙述: SQL进行IN查询时出现:java.sql.SQLException: ORA-01795: 列表中的最大表达式数为 1000 解决的方法: 问题原因是:SQL进行IN查询时.IN中的 ...
- knockout更新列表中的某条数据,knockout.js绑定数组时更新其中一条数据
knockout是一款前端实现MVVM的JS框架,仅knockout.js一个47kb的文件,相当实用,做前端无刷新页面,快速实现JS与HTML数据交互. knockout目前最新版:knockout ...
- android 在自定义的listview(有刷新加载项)列表中,数据过少时不能铺满整个屏幕时,header和footer同时显示问题
android 在自定义的listview(有刷新加载项)列表中,数据过少时,当刷新时,加载项也会显示,这是很头疼的一个问题,查阅了一些资料,总结了一个比较不错的方法: 原来代码: @Overrid ...
随机推荐
- Mac下 KGDB连接Linux
kgdb按照资料说可以使用网络(kgdboe)和串口连接(kgdboc)等方式连接. 这里使用后者,资料比较多,下面是自己在Mac上进行配置连接的过程. 先说一下环境: 主机:Mac OSX 10.1 ...
- nginx正确服务react-router应用
如今React应用普遍使用react-router作为路由管理,在开发端webpack自带的express服务器下运行和测试表现均正常,部署到线上的nginx服务器后,还需要对该应用在nginx的配置 ...
- Cannot perform conversion to XML from legacy HTML:
错误信息:Cannot perform conversion to XML from legacy HTML: The nekoHTML library is not in classpath. ne ...
- koa 中,中间件异步与同步的相关问题
同步中间件很容易理解,如以下代码: const Router = require('koa-router') , koa = new Router({ prefix: '/koa' }) , fs = ...
- 2cmd 窗口 javac 错误:编码GBK的不可映射字符
错误截图: 解决办法:第一步 第二步:
- mysql 安装版
安装 1.MySQL的安装类型选择: 在“Choose Setup Type”对话框有“Typical”默认安装类型:“complete"完全安装类型:Custom自定义安装类型. 我们选择 ...
- 让Oracle的 SHOW PARAMETER 命令显示隐藏参数
转自 http://blog.csdn.net/staricqxyz/article/details/8624549 Find internal of "show parameter&quo ...
- logback总结
Logback Logback由三大模块组成:logback-core.logback- classic和logback-access. Logback-core是其它两个模块的基础模块. Logba ...
- 使用 Azure CLI 创建 Linux 虚拟机
Azure CLI 用于从命令行或脚本创建和管理 Azure 资源. 本指南详细介绍了如何使用 Azure CLI 部署运行 Ubuntu 服务器的虚拟机. 服务器部署以后,将创建 SSH 连接,并且 ...
- DataTable拷贝DataRow
一开始,思路是这样的: DataTable dt = SqlHelper.GetTable("select * from Person"); DataTable dt2 = dt. ...