Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] "hover" css class for all elements that support the "elevation-x" class #20462

Open
TimoCuijpers opened this issue Sep 11, 2024 · 0 comments

Comments

@TimoCuijpers
Copy link

Problem to solve

*The "v-card" element has a "hover" property that makes the card pop out of the screen when hovering.*

The property makes the cursor a pointer when hovering the card but that should only work for the "link" property from the "v-card" element in my opininion.

The hover effect only goes to "elevation-5". If an element has an "elevation="10"" property, the hover property will not be shown because 10 > 5.

Proposed solution

Make a css class "hover" or "elevation-hover" that makes an element virtually pop out of the screen by giving it "elevation-5" added to the current elevation value stated in the property or class.

It also would be nice to also give an intensity value at the end of the "hover" class.

// Gives the button "elevation-10" when hovering
<v-btn
    class="hover" 
    elevation="5"
/>
// Gives the button "elevation-15" when hovering
<v-btn
    class="hover-10"
    elevation="5"
/>

This should also remove the hover property on the card entirely.

Also, remove the cursor-pointer class when the hover property is applied. This way, elements like v-sheets could expand when hovering them for better contrast while reading in sections.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant