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 ?
1
0
0
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 樣式有時(shí)可能有點(diǎn)棘手，首先您需要指定您將使用 SCSS，因?yàn)樵及粹o示例使用它，您可以通過在樣式塊中指定 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 而發(fā)生的，當(dāng)您設(shè)置 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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
