1、使用 CSS :hover
状态和伪类冻结元素。
在Element-ui的Button
组件中,当鼠标移入时,会根据hover
状态改变按钮背景颜色,你可以在这里尝试,
- 鼠标移入前:
- 鼠标移入后:
当我们想要修改hover状态的按钮背景时,可以通过Chrome devtools
来模拟hover
状态。
2、模拟表单元素的聚焦。
对于Select
表单组件,当元素获取焦点后会展示下拉菜单,丢失焦点后就会消失,如果你想通过Chrome devtools
选中它,往往是选择不到的。
- 获取焦点时:
- 丢失焦点时:
首先,我们需要选中元素,并勾选Emulate a focused page
选项,
随后,点击Select
组件,并通过Chrome devtools
选中该下拉框。