0
0
巴扎黑
发布时间：2018-05-28 17:36:52
|8729人浏览过
|来源于php中文网
原创
本篇文章主要介绍了css3实现伪类hover离开时平滑过渡效果示例，具有一定的参考价值，有兴趣的可以了解一下
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。
离开时效果生硬
由于p元素只有在:hover伪类触发的时候，效果才能加到p元素上。
立即学习“前端免费学习笔记（深入）”；
当鼠标离开p元素的时候，:hover伪类将不再生效，瞬间丢掉hover里写的动画效果。
此时，我们应当在原本元素上再写一个一模一样的transition效果，将离开断掉的动画效果续接上。
简单解决
此时，不管鼠标在什么时候离开元素，都会原样返回。
相关文章
css新手项目如何做卡片阴影_使用box shadow增加层次
css框架按钮点击效果不明显怎么办_结合hover active状态和transition动画
css框架按钮悬停颜色不变化怎么办_使用hover类覆盖默认样式
css 移动端导航栏显示异常怎么办_利用响应式隐藏与显示控制
csshover下伪类链接样式不生效怎么办_使用a:hover结合伪类顺序正确设置
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
void是一元运算符，执行右侧表达式但始终返回undefined；用于丢弃返回值、阻止a标签跳转、IIFE忽略结果、动态导入不取Promise、安全获取undefined。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
1
2025.12.29
调整VSCode界面字体大小可通过设置编辑器或整体UI缩放实现；2.修改"Editor:FontSize"改变代码字体；3.设置"Window:ZoomLevel"调整整体界面字体；4.使用Ctrl+滚轮快捷键临时缩放。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
1
2025.12.29
单行注释快捷键为Ctrl+/（Windows/Linux）或Cmd+/（macOS），块注释使用Shift+Alt+A（Windows/Linux）或Shift+Option+A（macOS），VSCode会根据语言类型自动匹配语法，如JavaScript用//，Python用#，C++用//，若快捷键无效需检查语言扩展或插件冲突。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
1
2025.12.29
本专题系统讲解 Golang 在命令行工具（CLI）开发中的实战应用，内容涵盖参数解析、子命令设计、配置文件读取、日志输出、错误处理、跨平台编译以及常用CLI库（如 Cobra、Viper）的使用方法。通过完整案例，帮助学习者掌握 使用 Go 构建专业级命令行工具与开发辅助程序的能力。
4
2025.12.29
热门下载
相关下载
精品课程
共18课时 | 4.1万人学习
共102课时 | 6.5万人学习
共132课时 | 9.2万人学习
最新文章
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
