Share via

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

Anonymous
2025-06-25T13:22:09+00:00

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!

Microsoft 365 and Office | SharePoint | Other | Windows

Locked Question. This question was migrated from the Microsoft Support Community. You can vote on whether it's helpful, but you can't add comments or replies or follow the question.

0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Anonymous
    2025-06-26T02:01:06+00:00

    Dear Sidem_569,

    Welcome to the community! Thanks for sharing your JSON and the context. 

    Based on your description, I see that you've put a lot of thought into customizing your SharePoint list view formatting. According to my research, SharePoint JSON formatting doesn't support CSS pseudo-classes like hover, which makes it tricky to show elements like a "Delete" button when hovering over the entire row or card. 

    Workaround:

    According to my research, you can try a hidden context variable "isSelected" and less documented "isRowHovered", though the latter is not officially supported and may not always behave consistently.

    Disclaimer: This approach depends on undocumented behavior, and Microsoft can change it without notice. Still, in practice, "isRowHovered" has worked for many users. For reference: https://www.lidorsystems.com/support/articles/angular/treegrid/tree-grid-buttons-on-row-hover/

    To get the most targeted help, I recommend posting this in the SharePoint forum, which is specifically focused on JSON formatting, view customization, and UI behavior. You'll find experts there who can offer deeper insights and potential workarounds tailored to your scenario. Here’s the link to the SharePoint forum: SharePoint | Microsoft Community Hub

    Additionally, you can ask about it in Microsoft Q&A for Microsoft SharePoint, and other users or Microsoft experts might provide insights or workarounds. SharePoint - Microsoft Q&A. Please rest assured I'll be following your thread too, you're not alone. I will continue to learn and support you so that we can find a solution together. Since I don't have enough resources to support further on this program code, I'll leave that question open in case one of our amazing volunteers has ideas for you.  

    I truly apologize that as forum moderator; I don’t have access to the backend systems and enough resource to troubleshoot this effectively due to privacy and security constraints. I am just organizing use cases and collecting data, including from you, on a daily basis and will continue to monitor the progress of this issue.

    I hope this information is helpful. If you have any difficulties or further questions, feel free to reach out, and we can further investigate the problem together. Please understand that our initial response does not always resolve the issue immediately. However, with your help and more detailed information, we can work together to find a solution.

    If my answer is helpful, please mark it as an answer, which will definitely help others in the community who have similar queries to find solutions to their problems faster.

    Thanks for your patience and understanding so far.  Looking forward to hearing from you.         

    Best Regards,          

    Vivian - MSFT | Microsoft Community Support Specialist

    Was this answer helpful?

    1 person found this answer helpful.
    0 comments
  2. Anonymous
    2025-06-29T06:55:18+00:00

    Hello Sidem_569, 

    Just following up to see how things are going, your updates would be greatly appreciated! If you have any difficulties, please do not hesitate to contact us.

    Looking forward to hearing from you. 
    Best regards, 

    Vivian - MSFT | Microsoft Community Support Specialist

    Was this answer helpful?

    0 comments