JSON column formatting hover styling
-
15-02-2021 - |
Question
I'm creating a custom formatting for the Title column of a document library so that users will always download the documents instead of opening them directly.
It's turning out well, but I can't figure one styling detail: I want the link to underline when hovered.
so in pseudo formatting code: style:hover{ text-decoration: underline; }
. The link itself is already styled as shown below
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "a",
"txtContent": "@currentField",
"style": {
"color": "#272727",
"text-decoration": "none",
"font-size": "14px"
},
"attributes": {
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
"@currentField"
]
}
}
}
La solution
I've been asking for hover styles for a long time. Unfortunately, as Michael Han_MSFT wrote in his answer the best you can get is the --hover
classes.
Fortunately, you can get creative with them to accomplish what you want. Give this format a try:
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"children": [
{
"elmType": "a",
"txtContent": "@currentField",
"style": {
"color": "#272727",
"text-decoration": "none",
"font-size": "14px",
"display": "inline-block",
"border-bottom-width": "1px",
"border-bottom-style": "solid"
},
"attributes": {
"target": "_blank",
"class": "ms-borderColor-white ms-borderColor-themePrimary--hover",
"href": {
"operator": "+",
"operands": [
"http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
"@currentField"
]
}
}
}
]
}
Here it is in action:
Autres conseils
You could use ms-bgColor-<color>--hover
to change hover style.
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "a",
"txtContent": "@currentField",
"style": {
"color": "#272727",
"text-decoration": "none",
"font-size": "14px"
},
"attributes": {
"target": "_blank",
"class": "ms-bgColor-red--hover",
"href": {
"operator": "+",
"operands": [
"http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
"@currentField"
]
}
}
}