JSON column formatting hover styling

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

Answer 1

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:

Answer 2

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

Answer 3

I have used ms-Link class and this is code that worked for me:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "style": {
    "font-size": "14px",
    "color": "black"
  },
  "txtContent": "@currentField",
  "attributes": {
    "target": "_blank",
    "class": "ms-Link",
    "href": "=if(indexOf([$ContentTypeId], '0x0120') >= 0, '?id=' + [$FileRef], @currentWeb + '/_layouts/15/Doc.aspx?sourcedoc='+ [$UniqueId] + '&action=view')"
  }
}