Mouse hover effects on vue & vuetify components

Question

So I'm trying to recreate mouse hover effect like in this example from the following article: https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

but in my case I want the hover effect applied on the v-card from the vuetify library using Vue.js. So here is my attempt: https://codepen.io/pokepim/pen/NWdwOEq

Now Im clearly getting coordinates when hovering over the card but it seems that the css is not updated even with the style binding at the component level. Anyone has idea what am I 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 the custom css style to the v-card, overriding vuetify styles can be a little tricky sometimes, first you need to specify that you'll be using SCSS, since the original button example uses it, you can do this by specifying the lang attribute in your style block.

<style lang="scss">
...
</style>

Done that, you'll notice that some css properties like background, color, border-radius still not work. If you don't want to mess with Vuetify's sass/scss variables. You can force apply these css properties by using the !important rule.

When I was working on my example I noticed that the offsetTop value was a bit misplaced under the mouse pointer and that was happening because of my v-app-bar, when you set the app prop the app bar stays on top of the page as part of the layout.

So a quick fix I did was just simply subtract the appbar height from the offsetTop value, of course, this can vary depending on your design layout.