J'essaie d'utiliser le composant Vuetify pour obtenir des effets de vignettes v-img sans succès. Mes paramètres d'image sont les suivants :
Je les ai disposés horizontalement dans une ligne et une colonne et j'essaie de le configurer de sorte que lorsque je passe en revue chaque image virtuelle, ils s'assombrissent individuellement et un bouton v blanc uni apparaît au centre, je lui attribuera également un lien/texte. Étant donné que le composant de survol semble manquer de propriétés de gradation, quelle est la meilleure approche.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je ne pense pas que vous obtiendrez cela directement, mais vous n’avez rien d’autre à faire pour obtenir les résultats souhaités.
Prêt à l'emploi dès la sortie de la boîte... Utilisez le composant
Hoverpour déclencher des événements et utilisez les valeurs d'emplacement (booléennes) pour basculer les classes CSS.modèle
Personnaliser... Ajoutez ensuite quelques styles de plage. Ce qui suit n'est qu'un exemple simple, mais vous pouvez le personnaliser à votre guise.
Style
.v-image { transition: filter .4s ease-in-out; } .v-card:hover .v-image { filter: brightness(25%); }Exemple :https://codepen.io/alexpetergill/pen/NWBadjVp >
Documentation :https://vuetifyjs.com/en/components/hover/
API :https://vuetifyjs.com/en/api/v-hover/#slots