Forum Discussion

Spawn10's avatar
Spawn10
Copper Contributor
Dec 22, 2023
Solved

How do I change the color of the hyperlink text on hover?

I am using JSON formatting to change the view on my list. I have a botton I am displaying on the gallery card view...in the button, I am displaying "Click to RSVP"...this text is currently displayed ...
  • ganeshsanap's avatar
    Mar 05, 2024

    Spawn10 You can apply hover class to element as well like: 

     

    "children": [
      {
        "elmType": "button",
        "customRowAction": {
          "action": "Setvalue",
          "actioInput": {
            "Column1": "value1"
          }
        },
        "attributes": {
          "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover ms-bgColor-blue--hover ms-fontColor-white--hover"
        },
        "style": {
          "background-color": "sky-blue",
          "cursor": "pointer",
          "width": "fit-content",
          "border-color": "gray"
        },
        "children": [
          {
            "elmType": "a",
            "txtContent": "Click to RSVP",
            "attributes": {
              "target": "_blank",
              "href": "https://myurl",
              "class": "ms-fontColor-white--hover"
            },
            "style": {
              "word-break": "keep-all",
              "height": "100%",
              "width": "100%"
            }
          }
        ]
      }
    ]

    Note: This will change the color to white on hover of hyperlink only, not on hover of button.

     

    If you want to use hyperlink inside the button element with proper styling, refer the JSON given in these articles once:

    1. SharePoint Online: Download files using JSON Formatting 
    2. Download Image from SharePoint Image column using JSON formatting 

     


    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources