很少用到的 css 小技巧
Autor
天魂
阅读需要 1 分钟
一些不常用到的骚操作，可以实现日常开发中常见的需求，原来css还可以这么玩。
1.在 PC 端不显示页面默认的滚动条
1
2
3
html {
overflow: hidden;
}
2.骚气的扩大元素的鼠标事件生效区域
只需添加一个 class
1
2
3
4
.expansion {
/* 向上下左右扩大 10px */
border: 10px solid transparent;
}
3.更骚的实现鼠标悬浮更换图片
1
2
3
img:hover {
content: url('/* 新的图片 url */');
}
See the Pen abzoovN by 天魂 (@Tian-Hun) on CodePen.
4.让文本或者图片内容不被选中
只需添加一个 class
1
2
3
.none-select: {
user-select: none
}
欢迎订阅，一起探索 web 前端骚操作 🤹