Btn hover not working


Topic: Btn hover not working

GuillaumeDgr pro premium asked 4 years ago

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;
}

}


Marcin Luczak staff answered 4 years ago

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


GuillaumeDgr pro premium answered 4 years ago

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 4 years ago

I'm happy that you've managed to find the solution :)

Keep coding, Marcin


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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
Tags