vuetifyjs/vuetify

[Feature Request] Add a way to disable the hover effect on <v-expansion-panels>

Open

#21 615 ouverte le 20 juin 2025

Voir sur GitHub
 (1 commentaire) (0 réactions) (0 assignés)TypeScript (40 995 stars) (7 139 forks)batch import
C: VExpansionPanelsT: featuregood first issue

Description

Problem to solve

This feature allows developers to disable the hover effect from <v-expansion-panels> without relying on CSS rules. Right now the desired result can be achieved with this:

.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
  --v-hover-opacity: 0;
}

Proposed solution

Add a prop or a SASS variable to control above mentioned behavior.

Guide contributeur

Stack technique
vuetypescriptcss
Domaine
frontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
under 1 hour
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
VueVuetify component structure
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80
Direction de recherche
Investigate the VExpansionPanel component source code in packages/vuetify/src/components/VExpansionPanel/. Look for the hover overlay implementation in styles (CSS/SASS). Review existing props on VExpansionPanel and similar components (e.g., VCard) for patterns to disable hover. Propose adding a Boolean prop like 'no hover' that conditionally sets the hover overlay opacity to 0. Consider using a SASS variable to allow global theming.