Disable hover effect on all elements like, select, input, button

[raghees]

I am trying to remove hover effect on all the elements through the following code, it only worked for the button. Is there any option to remove all hover effect of the specific element or all the elements.

body.desktop .q-focusable:focus .q-focus-helper,
body.desktop .q-hoverable:hover .q-focus-helper {
  background: inherit !important;
  opacity: 0 !important;
}

body .q-field .q-field__control .q-hoverable:hover {
  background: inherit !important;
  opacity: 0 !important;
}

[dobbel]

@raghees

I am not skilled enough in Quasar’s CSS to come up with a generic way to remove all hover effects from all components…maybe @metalsadman or @beets has an idea?

You could look into changing some sass global hover variables:
https://quasar.dev/style/sass-scss-variables

[beets]

@raghees I think @dobbel’s suggestion is probably best if you want to disable all transitions:

In quasar.variables.sass:

$generic-hover-transition: none

If it doesn’t work then we can try something else.

[raghees]

thanks @dobbel and @beets

[raghees]

I am using quasar-plugin for vue-cli and not using qusar-cli. will it work there as well?

[dobbel]

@raghees

I applied the suggested @beets sass var. But It did not remove any hover effects.