Show "Delete" button on hover over the item (not just the button) in SharePoint JSON formatting

Question

Hi everyone,

I'm trying to configure my SharePoint list view formatting using JSON so that a "Delete" button appears only when the user hovers over the whole item/card, not just when hovering directly on the button itself.

Currently, this is what's happening:

The "Delete" button only becomes visible when I hover directly over the button area.

I would like it to appear when the mouse enters the whole card (the outer element).

Also, the border of the button stays visible even when the mouse leaves the card, and I would like it to disappear accordingly.

Here’s a simplified extract of my JSON code for context: {

"elmType": "button",

"customRowAction": {

"action": "setValue",

"actionInput": {

"wantDelete": true

}

},

"style": {

"visibility": "=if([$wantDelete] == true, 'hidden', 'visible')",

"position": "absolute",

"top": "10px",

"right": "6px",

"border": "none",

"cursor": "pointer",

"background-color": "transparent",

"z-index": "20"

},

...

} Here is all my code : https://codeshare.io/aVNBmP

Is there a way to trigger the visibility of the delete button when the mouse hovers over the entire card (e.g., the outer div), and hide it again when the mouse leaves the card?

I understand there are some limitations with JSON formatting (e.g., no native support for :hover in style), but is there a workaround using conditional logic or calculated fields?

Any help or workaround would be greatly appreciated!

Thanks in advance!

Answer 1

Hi @Antoine

Thank you for posting your question in the Microsoft Q&A forum.

Based on your description, you want to hover a row then a delete button will appear.

As you mentioned, SharePoint JSON formatting does not support CSS pseudo-classes like hover, which means you can't directly trigger style changes based on mouse hover events.

I found that isSelected can help you trigger the button, but I know this is not your end goal.

Another way to achieve this is using SPFx to customize your lists if you are comfortable with hard coding development. (SPFx support variety of features).

I recommend reaching out to the SharePoint Developer | Microsoft Community Hub, there are professional developers to address and assist you more efficiently.

Additionally, if you think SharePoint should support CSS, you can raise your valuable ideas to Microsoft via Feedback Portal.

Microsoft will listen and try their best to enhance customers' experience.  

Once again, I apologize for not able to help you further. I know redirecting you to another forum might cause some inconvenience.

Thanks for your understanding.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".   

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.