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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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而发生的，当您设置applorsque 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.