1、希望悬浮的时候,img图标的src改变
<template>
<div style="padding: 20px">
<img src="../static/icon/1.svg">
</div>
</template>
<style scoped>
img:hover {
content: url(../static/icon/2.svg);
}
</style>
2、希望鼠标悬浮在el-input上的时候,另一个dom能发生改变
注意这里的input和iconButton是css类名
.input:hover .iconButton {
background-color: #337DFF;
}
3、页面有好多el-input,只希望其中一个的原始样式更改,别的不影响
此时,类名为input下的e-input样式更改
.input {
margin-top: 22px;
position: relative;
float: right;
margin-right: 15px;
border: 1px solid #DCDFE6;
border-radius: 2px 0px 0px 2px;
& /deep/ .el-input__inner {
border: none;
}
}
4、希望改变页面所有的el-input样式
/deep/ .el-button {
border-radius: 2px;
}
//上面代码vscode标红,用下面的
::v-deep .el-button {
border-radius: 2px;
}