2

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"
      ]
    }
  }
}
2

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:

Gif of working solution

1
  • 1
    Thanks, this works! – JJD Aug 21 '20 at 14:53
0

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"
      ]
    }
  }
}
1
  • I found that solution also but how does that solve my problem? It makes the background red, I want to underline the text. Is there a class like "class": "ms-textdecoration-underline--hover" ? – JJD Aug 21 '20 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.