Hover on Card

[giladvidal]

Hello,
I have a card in the page. When moving the cursor from the page area to the card area, the card frame is being highlighted. How is it possible to have the card as part of the page?

<Card style={{
marginTop: '20px',
}}>
...
<AnalyticalTable
className="cursor-text"
...

Thanks,
Gilad

[Lukas742]

Hi @giladvidal

I'm not quite sure what you want to achieve. If you want to add a border-color or box-shadow to the Card while the user is hovering over it, you can do that by using onMouseOver and onMouseOut (codeSandbox). If that is not the case then please elaborate a bit more.

Edit:
I just noticed that you don't even need js for this... You can just use the :hoverselector (codeSandbox)

[giladvidal]

Thanks @Lukas742 , you are a real value to the company :)

Screenshot to explain better.

[Lukas742]

Thanks @giladvidal :)

I overlooked that you are using the "horizon" theme. With horizon the box-shadow on hover is integrated by design and should preferably not be changed. If you still want to change it you could overwrite the hover CSS variable to the default one:

'--_ui5_card_hover_box_shadow': 'var(--_ui5_card_box_shadow)'

Keep in mind though, that these are internal variables and that they can be changed without an entry in the change log of UI5 Web Components.

If you feel like altering the styles of the card root should be possible without overwriting CSS variables then you could also open a feature request in the UI5 Web Components repo and ask our colleagues if they could add the ::part pseudo-element to the element in the shadow root.