Mouseover effect on vue and vuetify components

Question

So I tried to recreate the mouseover effect as shown in the example in the following article: https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

But in my case, I want to apply hover effect to v-card from vuetify library using Vue.js. So this is my attempt: https://codepen.io/pokepim/pen/NWdwOEq

Now I clearly get the coordinates when hovering over the card, but even with style binding at the component level, the CSS doesn't seem to update. Does anyone know what I'm doing wrong?

Answer 1

Check this codesanbox I made: https://codesandbox.io/s/stack-70157850-3cblq?file=/src/components/CustomExample.vue

I was able to apply custom css styles to v-card, overriding vuetify styles can sometimes be a bit tricky, first you need to specify that you will be using SCSS as the original button example uses it, you can do this by This is done by specifying the lang attribute in the style block.

After finishing, you will notice that some css properties (such as background, color, border-radius) still don't work. If you don't want to mess with Vuetify's sass/scss variables. You can force the application of these css properties using !important rules.

While I was working on my example I noticed that the offsetTop value was a bit misaligned under the mouse pointer, this happened because of my v-app-bar when you set app attribute, the app bar remains at the top of the page as part of the layout.

So the quick fix I did was to simply subtract the app bar height from the offsetTop value, of course this may vary depending on your design layout.