Effet de survol de la souris sur les composants vue et vuetify

Question

J'ai donc essayé de recréer l'effet de survol comme le montre l'exemple de l'article suivant : https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

Mais dans mon cas, je souhaite appliquer un effet de survol sur v-card à partir de la bibliothèque vuetify en utilisant Vue.js. Voici donc ma tentative : https://codepen.io/pokepim/pen/NWdwOEq

Maintenant, j'obtiens clairement les coordonnées lorsque je survole la carte, mais même avec la liaison de style au niveau du composant, le CSS ne semble pas se mettre à jour. Est-ce que quelqu'un sait ce que je fais de mal ?

Answer 1

Découvrez cette codesanbox que j'ai créée : https://codesandbox.io/s/stack-70157850-3cblq?file=/src/components/CustomExample.vue

J'ai pu le faire en appliquant un style CSS personnalisé à l'attribut v-card，覆盖 vuetify 样式有时可能有点棘手，首先您需要指定您将使用 SCSS，因为原始按钮示例使用它，您可以通过在样式块中指定 lang.

Après avoir terminé, vous remarquerez que certaines propriétés CSS (telles que l'arrière-plan, la couleur, le rayon de bordure) ne fonctionnent toujours pas. Si vous ne voulez pas jouer avec les variables sass/scss de Vuetify. Vous pouvez forcer l'application de ces propriétés CSS en utilisant la règle !important.

Pendant que je travaillais sur mon exemple, j'ai remarqué que la valeur offsetTop était un peu mal alignée sous le pointeur de la souris, cela était dû à mon attribut v-app-bar 而发生的，当您设置 app lorsque la barre d'application restait en haut de la page dans le cadre de la mise en page.

La solution rapide que j'ai faite a donc été de simplement soustraire la hauteur de la barre d'application de la valeur offsetTop, bien sûr, cela peut varier en fonction de la disposition de votre conception.