SOLVED

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

Copper Contributor

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 as a huperlink in the button (underlined). When the user hover over the button, I want to be able to change the background color of the button and the text being displayed in the button. 

 "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"
		  },
		  "style: {
			  "word-break": "keep-all"
		  }
	  }
	  ]
      
    }
  ]

 

With the above formatting, the bckground color of the button does change when a user hovers over the button. However, the text in the button does not change color.

Is it possible to change the font color of the hyperlink text, when a user hover over the button? 

1 Reply
best response confirmed by Spawn10 (Copper Contributor)
Solution

@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.

1 best response

Accepted Solutions
best response confirmed by Spawn10 (Copper Contributor)
Solution

@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.

View solution in original post