Vue3引入elementplus的输入框el-input,如果想在鼠标点击即搜索框获得焦点后发生变化,那就得用到css的:focus选择器
:focus不能用在div上,一般用于输入框input
引入el-input
<el-input v-model="input" placeholder="Please input" class="input" />
使用:focus选择器改变样式
.input:focus{ width: 220px; }
发现失效了
问题出在哪呢?这里有个很坑的点就是:focus前面需要有个空格
正确写法:
.input :focus{ width: 220px; }
如果是:hover则不用
.input:hover{ width: 220px; }