Skip to content

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

Description

@TimoCuijpers

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.

Metadata

Metadata

Assignees

Labels

T: enhancementFunctionality that enhances existing featuresT: featureA new feature

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions