①当悬浮不点击时,触发.el-button:hover;
②点击按下鼠标时,触发.el-button:active;
③点击抬起鼠标时,触发.el-button:focus, .el-button:hover;
④移开鼠标时,仍然触发.el-button:focus;
⑤移开后点击别处,触发.el-button。
如果有各种限定的,.el-button 就不好使了,需要在给类也加上同样的限定,如成功按钮就要 .el-button--success 来修改,别的限定也一样类名如下:
.el-button--primary 主要按钮
.el-button--success 成功
.el-button--info 信息
.el-button--warning 警告
.el-button--danger 危险
.el-button--medium 中等
.el-button--small 小型
.el-button--mini 迷你
本文详细介绍了前端按钮在不同状态下的交互效果,包括鼠标悬停、按下、焦点及移开时的触发事件,并展示了如何通过.el-button类及其衍生类(如.el-button--success)来自定义按钮的样式和限定条件。同时,讨论了按钮状态在用户体验中的重要性。
5529

被折叠的 条评论
为什么被折叠?



