Topic: Btn hover not working
Expected behavior Hover background and text colors changes.
Actual behavior Nothing happens.
Resources (screenshots, code snippets etc.)
<mdb-btn
outline="white"
size="sm"
><span class="mr-3">More</span>
<mdb-icon
fas
icon="angle-right"
class="my-2 ml-3 mr-0" />
</mdb-btn>
.btn-outline-white {
font-family: "Gelion", sans-serif;
color: $white !important;
background-color: transparent !important;
text-transform: unset !important;
transition: all 0.3s ease-in;
&:hover,
&:focus,
&:active {
color: $primary !important;
background-color: $white !important;
}
}
Hi,
This may be a problem with scss color variables are not exposed to the Vue app. Please see my snippet showing your code works with non variable based colors https://mdbootstrap.com/snippets/vue/marcin-luczak/3107326
Keep coding, Marcin
This is still not working, I don't know why... Anyway I found a solution : scss in direct component file.
<style lang="scss" scoped>
// Only working here - Not working in main.scss
.btn-outline-white {
font-family: 'Gelion', sans-serif;
color: $white !important;
background-color: transparent !important;
text-transform: unset !important;
transition: all 0.3s ease-in;
&:hover,
&:focus,
&:active {
color: $primary !important;
background-color: $white !important;
}
}
</style>
Marcin Luczak staff commented 3 years ago
I'm happy that you've managed to find the solution :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB4 6.7.2
- Device: Mac book pro
- Browser: Firefox developers
- OS: MacOs
- Provided sample code: No
- Provided link: No