Forum Discussion
How do I change the color of the hyperlink text on hover?
- Mar 05, 2024
Spawn10 You can apply hover class to a 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:
- SharePoint Online: Download files using JSON Formatting
- 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.
Spawn10 You can apply hover class to a 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:
- SharePoint Online: Download files using JSON Formatting
- 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.