1.hover
<template>
<div class="list-item">
<h4>字体设计</h4>
<div class="list-desc">样式改变</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {};
},
methods: {},
mounted() {
},
};
</script>
<style scoped lang="scss">
.list-item:hover .list-desc {
color: #1f1c18;
background-color: #d46767;
}
</style>
2先hover再展示:class .back:hover:before
元素hover之后再使用before
::v-deep .ivu-icon.ivu-icon-ios-arrow-forward:hover:before{
color: #c54242 !important;
}
::v-deep .ivu-icon.ivu-icon-ios-arrow-back:hover:before{
color: #c54242 !important;
}
:before{
content:'\e790'
}