悬停或单击v-btn时如何删除按钮后面的背景?
我尝试将涟漪设置为false,但仍具有背景。我找不到CSS在这种背景下工作。
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-card flat>
<v-card-text>
<v-container fluid class="pa-0">
<v-row>
<v-col cols="12">
<p>Normal</p>
</v-col>
<v-col cols="12" sm="3">
<v-btn ripple="false" icon color="pink">
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-app>
</div>
对于单击时的背景(波纹功能),缺少绑定注释,您传递的是string而不是false值。因此,在ripple之前将“:”放到该工作中。
但是,要处理悬停背景,您需要对CSS进行一些修改。我在scss中写这个,你可以遵循这个想法
<v-btn :ripple="false" icon color="pink" id="no-background-hover"> <v-icon>mdi-heart</v-icon> </v-btn> <style lang="scss"> #no-background-hover::before { background-color: transparent !important; <= can set to any color you want } </style>
上面的代码仅设置为ID为
"no-background-hover"
的特定按钮,如果您希望其他按钮都发生这种情况。这是该按钮的类,您可以将CSS查询选择器更改为所需的类级别
<button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default pink--text" id="no-background"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-heart theme--light"></i></span></button>