Vuetify: [Bug Report] Hover prop doesn't work (works when outlined)

Created on 18 Jun 2020  路  4Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.3.1
Last working version: 2.2.19
Vue Version: 2.6.11
Browsers: Chrome 83.0.4103.106
OS: Linux x86_64

Steps to reproduce

Move mouse over a card

Expected Behavior

Hover effect

Actual Behavior

No hover effect

Reproduction Link

https://codepen.io/yerzhant/pen/zYroQez?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcards%2F

VCard has PR bug

Most helpful comment

Until the PR is merged and released, here is a workaround:

.v-card--hover:hover, .v-card--hover:focus {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
}

All 4 comments

This happens with any card I use from the Docs site, using the Codepen example icon button. Doesn't have to be Outlined either.

Also, last time I remember, doesn't the link attribute add an overlay on the card surface? It's not doing that anymore too.

I confirm the bug. It used to work with version 2.2.x, and seems it appears from v 2.3.0.

Until the PR is merged and released, here is a workaround:

.v-card--hover:hover, .v-card--hover:focus {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
}

Is this still an issue? I'm still seeing this behavior when I open a new Codepen example (via the live docs)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

itanka9 picture itanka9  路  3Comments

dohomi picture dohomi  路  3Comments

aaronjpitts picture aaronjpitts  路  3Comments

Webifi picture Webifi  路  3Comments

gluons picture gluons  路  3Comments