Modern lists - Row hover style

Question

I'm customizing a modern list using the default styling and conditional formatting tools but now that I have set row colors the hover styles of the rows are clashing.

I want to just remove the hover effect entirely from the rows. Here's my code as it stands:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",

  "additionalRowClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Topic]",
          "The Business"
        ]
      },
      "sp-css-backgroundColor-BgDarkBlue sp-field-fontSizeMedium sp-css-color-WhiteText sp-field-borderAllSemibold sp-field-borderAllSolid sp-css-borderLeftColor-WhiteText sp-css-borderRightColor-WhiteText sp-css-borderTopColor-WhiteText sp-css-borderBottomColor-WhiteText",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Topic]",
              "Helpful Guides"
            ]
          },
          "sp-css-backgroundColor-BgBlue sp-field-fontSizeMedium sp-css-color-WhiteText sp-field-borderAllSemibold sp-field-borderAllSolid sp-css-borderLeftColor-WhiteText sp-css-borderRightColor-WhiteText sp-css-borderTopColor-WhiteText sp-css-borderBottomColor-WhiteText",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Topic]",
                  "My Team"
                ]
              },
              "sp-css-backgroundColor-BgPurple sp-field-fontSizeMedium sp-css-color-WhiteText sp-field-borderAllBold sp-field-borderAllSolid sp-css-borderLeftColor-WhiteText sp-css-borderRightColor-WhiteText sp-css-borderTopColor-WhiteText sp-css-borderBottomColor-WhiteText",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$Topic]",
                      "Systems"
                    ]
                  },
                  "sp-css-backgroundColor-BgCornflowerBlue sp-field-fontSizeMedium sp-css-color-DarkBlueText sp-field-borderAllSemibold sp-field-borderAllSolid sp-css-borderLeftColor-WhiteText sp-css-borderRightColor-WhiteText sp-css-borderTopColor-WhiteText sp-css-borderBottomColor-WhiteText",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$Topic]",
                          "People"
                        ]
                      },
                      "sp-css-backgroundColor-BgViolet sp-field-fontSizeMedium sp-css-color-PurpleText sp-field-borderAllSemibold sp-field-borderAllSolid sp-css-borderLeftColor-WhiteText sp-css-borderRightColor-WhiteText sp-css-borderTopColor-WhiteText sp-css-borderBottomColor-WhiteText",
                      ""
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

You can do this by using a slightly different set of classes. Instead of the sp-css-backgroundColor-* classes you can use the ms-bgColor-* Fluent UI classes. The colors aren't exactly the same, but they do offer --hover equivalents.

To "disable" the hover effect, you just need to apply both the ms-bgColor-* and ms-bgColor-*--hover classes using the same color. Here is your format with those classes swapped in (colors are pretty similar but not exactly the same):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",

  "additionalRowClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Topic]",
          "The Business"
        ]
      },
      "ms-bgColor-sharedCyanBlue20 ms-bgColor-sharedCyanBlue20--hover ms-fontColor-white ms-fontColor-white--hover ms-borderColor-white sp-field-fontSizeMedium sp-field-borderAllSemibold sp-field-borderAllSolid",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Topic]",
              "Helpful Guides"
            ]
          },
          "ms-bgColor-sharedCyanBlue10 ms-bgColor-sharedCyanBlue10--hover ms-fontColor-white ms-fontColor-white--hover ms-borderColor-white sp-field-fontSizeMedium sp-field-borderAllSemibold sp-field-borderAllSolid",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Topic]",
                  "My Team"
                ]
              },
              "ms-bgColor-sharedBlueMagenta20 ms-bgColor-sharedBlueMagenta20--hover ms-fontColor-white ms-fontColor-white--hover ms-borderColor-white sp-field-fontSizeMedium sp-field-borderAllBold sp-field-borderAllSolid",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$Topic]",
                      "Systems"
                    ]
                  },
                  "ms-bgColor-sharedGray10 ms-bgColor-sharedGray10--hover ms-fontColor-sharedCyanBlue20 ms-fontColor-sharedCyanBlue20--hover ms-borderColor-white sp-field-fontSizeMedium sp-field-borderAllSemibold sp-field-borderAllSolid",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$Topic]",
                          "People"
                        ]
                      },
                      "ms-bgColor-purpleLight ms-bgColor-purpleLight--hover ms-fontColor-sharedBlueMagenta20 ms-fontColor-sharedBlueMagenta20--hover ms-borderColor-white sp-field-fontSizeMedium sp-field-borderAllSemibold sp-field-borderAllSolid",
                      "ms-bgColor-white ms-bgColor-white--hover ms-fontColor-neutralPrimary ms-fontColor-neutralPrimary--hover ms-borderColor-white sp-field-fontSizeMedium sp-field-borderAllSemibold sp-field-borderAllSolid"
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Keep in mind that the standard Title column doesn't respond to the additionalRowClass values that correspond to text color. This is because it is overridden by a button style. This can be accounted for by applying your own column format to the Title column.

More details on the color classes can be found here: https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/shared

Answer 2

I don't think it is possible to remove SharePoint out of the box hover effect using SharePoint JSON formatting capabilities while using additionalRowClass row formatting.

Unless you add any class (pre-loaded on page) in JSON which has CSS properties like:

background-color: initial