diff --git a/change/@uifabric-experiments-2019-07-30-10-32-51-cliffkoh-persona.json b/change/@uifabric-experiments-2019-07-30-10-32-51-cliffkoh-persona.json
new file mode 100644
index 0000000000000..ef96c85c06fa1
--- /dev/null
+++ b/change/@uifabric-experiments-2019-07-30-10-32-51-cliffkoh-persona.json
@@ -0,0 +1,8 @@
+{
+  "comment": "Experiments snapshot",
+  "type": "none",
+  "packageName": "@uifabric/experiments",
+  "email": "cliff.koh@microsoft.com",
+  "commit": "68e92fda0699006a704575a93cb55335230a4ba6",
+  "date": "2019-07-30T17:32:51.255Z"
+}
diff --git a/change/office-ui-fabric-react-2019-07-25-13-59-00-master.json b/change/office-ui-fabric-react-2019-07-25-13-59-00-master.json
new file mode 100644
index 0000000000000..3a5ee9a401a6a
--- /dev/null
+++ b/change/office-ui-fabric-react-2019-07-25-13-59-00-master.json
@@ -0,0 +1,8 @@
+{
+  "comment": "Persona: Fix styles issue caused by unnecessary nesting",
+  "type": "patch",
+  "packageName": "office-ui-fabric-react",
+  "email": "cliff.koh@microsoft.com",
+  "commit": "080f2b1f3ca771b92c51704e2948f79567d86b29",
+  "date": "2019-07-25T20:59:00.496Z"
+}
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap
index e87eb0eb13283..281ef72679f44 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap
@@ -218,9 +218,6 @@ Array [
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -302,6 +299,9 @@ Array [
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
                   @media screen and (-ms-high-contrast: active){& {
                     color: HighlightText;
                   }
@@ -716,9 +716,6 @@ Array [
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -800,6 +797,9 @@ Array [
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
                   @media screen and (-ms-high-contrast: active){& {
                     color: HighlightText;
                   }
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
index ed895ca4a3cef..fe18f5bf019a7 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
@@ -65,14 +65,6 @@ export const getStyles = (props: IPersonaStyleProps): IPersonaStyles => {
         selectors: {
           '.contextualHost': {
             display: 'none'
-          },
-
-          ':hover': {
-            selectors: {
-              $primaryText: {
-                color: palette.neutralDark
-              }
-            }
           }
         }
       },
@@ -215,7 +207,12 @@ export const getStyles = (props: IPersonaStyleProps): IPersonaStyles => {
       {
         color: palette.neutralPrimary,
         fontWeight: FontWeights.regular,
-        fontSize: FontSizes.medium
+        fontSize: FontSizes.medium,
+        selectors: {
+          ':hover': {
+            color: palette.neutralDark
+          }
+        }
       },
 
       showSecondaryText && {
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
index 652abda894d7c..58cb416a4a76b 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
@@ -31,9 +31,6 @@ exports[`Persona renders Persona children correctly 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -115,6 +112,9 @@ exports[`Persona renders Persona children correctly 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -211,9 +211,6 @@ exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -310,6 +307,9 @@ exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -403,9 +403,6 @@ exports[`Persona renders Persona correctly with image 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -511,6 +508,9 @@ exports[`Persona renders Persona correctly with image 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -604,9 +604,6 @@ exports[`Persona renders Persona correctly with initials 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -688,6 +685,9 @@ exports[`Persona renders Persona correctly with initials 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -781,9 +781,6 @@ exports[`Persona renders Persona correctly with no props 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -880,6 +877,9 @@ exports[`Persona renders Persona correctly with no props 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     />
     <div
@@ -959,9 +959,6 @@ exports[`Persona renders Persona which calls onRenderCoin callback without image
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -1122,6 +1119,9 @@ exports[`Persona renders Persona which calls onRenderCoin callback without image
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -1261,9 +1261,6 @@ exports[`Persona renders Persona which calls onRenderPersonaCoin callback with c
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <i
     aria-hidden={true}
@@ -1310,6 +1307,9 @@ exports[`Persona renders Persona which calls onRenderPersonaCoin callback with c
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -1449,9 +1449,6 @@ exports[`Persona renders correctly with onRender callback 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -1633,6 +1630,9 @@ exports[`Persona renders correctly with onRender callback 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap
index 704b6c7e049aa..24e886d94c1b4 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap
@@ -31,9 +31,6 @@ exports[`Persona renders Persona correctly with image 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -139,6 +136,9 @@ exports[`Persona renders Persona correctly with image 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -232,9 +232,6 @@ exports[`Persona renders Persona correctly with initials 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -316,6 +313,9 @@ exports[`Persona renders Persona correctly with initials 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -409,9 +409,6 @@ exports[`Persona renders Persona correctly with no props 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -508,6 +505,9 @@ exports[`Persona renders Persona correctly with no props 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     />
     <div
diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap
index 375e87b2631d7..28ff1b7580841 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap
@@ -31,9 +31,6 @@ exports[`Persona renders Persona children correctly 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -115,6 +112,9 @@ exports[`Persona renders Persona children correctly 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -211,9 +211,6 @@ exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -310,6 +307,9 @@ exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -403,9 +403,6 @@ exports[`Persona renders Persona correctly with image 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -511,6 +508,9 @@ exports[`Persona renders Persona correctly with image 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -604,9 +604,6 @@ exports[`Persona renders Persona correctly with initials 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -688,6 +685,9 @@ exports[`Persona renders Persona correctly with initials 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -781,9 +781,6 @@ exports[`Persona renders Persona correctly with no props 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -880,6 +877,9 @@ exports[`Persona renders Persona correctly with no props 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     />
     <div
@@ -959,9 +959,6 @@ exports[`Persona renders Persona which calls onRenderCoin callback without image
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -1122,6 +1119,9 @@ exports[`Persona renders Persona which calls onRenderCoin callback without image
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -1261,9 +1261,6 @@ exports[`Persona renders Persona which calls onRenderPersonaCoin callback with c
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <i
     aria-hidden={true}
@@ -1310,6 +1307,9 @@ exports[`Persona renders Persona which calls onRenderPersonaCoin callback with c
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -1449,9 +1449,6 @@ exports[`Persona renders correctly with onRender callback 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -1633,6 +1630,9 @@ exports[`Persona renders correctly with onRender callback 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Alternate.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Alternate.Example.tsx.shot
index d58b60d54c13c..0100d24b9e2c8 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Alternate.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Alternate.Example.tsx.shot
@@ -52,9 +52,6 @@ exports[`Component Examples renders Persona.Alternate.Example.tsx correctly 1`]
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -163,6 +160,9 @@ exports[`Component Examples renders Persona.Alternate.Example.tsx correctly 1`]
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -302,9 +302,6 @@ exports[`Component Examples renders Persona.Alternate.Example.tsx correctly 1`]
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -413,6 +410,9 @@ exports[`Component Examples renders Persona.Alternate.Example.tsx correctly 1`]
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -553,9 +553,6 @@ exports[`Component Examples renders Persona.Alternate.Example.tsx correctly 1`]
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -687,6 +684,9 @@ exports[`Component Examples renders Persona.Alternate.Example.tsx correctly 1`]
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Basic.Example.tsx.shot
index 37dca48b4410e..f265b63c0fb0a 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Basic.Example.tsx.shot
@@ -233,9 +233,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -301,6 +298,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -465,9 +465,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -554,6 +551,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -718,9 +718,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -849,6 +846,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1013,9 +1013,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1144,6 +1141,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1308,9 +1308,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1467,6 +1464,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1630,9 +1630,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1781,6 +1778,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1944,9 +1944,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -2101,6 +2098,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -2264,9 +2264,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -2421,6 +2418,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -2584,9 +2584,6 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -2768,6 +2765,9 @@ exports[`Component Examples renders Persona.Basic.Example.tsx correctly 1`] = `
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Colors.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Colors.Example.tsx.shot
index 280073451a00b..a664ecd6e908c 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Colors.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Colors.Example.tsx.shot
@@ -72,9 +72,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -156,6 +153,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -247,9 +247,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -331,6 +328,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -422,9 +422,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -506,6 +503,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -597,9 +597,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -681,6 +678,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -772,9 +772,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -856,6 +853,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -947,9 +947,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -1031,6 +1028,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -1122,9 +1122,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -1206,6 +1203,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -1297,9 +1297,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -1381,6 +1378,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -1472,9 +1472,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -1556,6 +1553,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -1647,9 +1647,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -1731,6 +1728,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -1822,9 +1822,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -1906,6 +1903,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -1997,9 +1997,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -2081,6 +2078,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -2172,9 +2172,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -2256,6 +2253,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -2347,9 +2347,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -2431,6 +2428,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -2522,9 +2522,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -2606,6 +2603,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -2697,9 +2697,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -2781,6 +2778,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -2872,9 +2872,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -2956,6 +2953,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -3047,9 +3047,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -3131,6 +3128,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -3222,9 +3222,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -3306,6 +3303,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
@@ -3397,9 +3397,6 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -3481,6 +3478,9 @@ exports[`Component Examples renders Persona.Colors.Example.tsx correctly 1`] = `
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         >
           <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomCoinRender.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomCoinRender.Example.tsx.shot
index 4d628543ab65c..26f190c51c108 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomCoinRender.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomCoinRender.Example.tsx.shot
@@ -56,9 +56,6 @@ exports[`Component Examples renders Persona.CustomCoinRender.Example.tsx correct
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
     style={
       Object {
         "height": 72,
@@ -197,6 +194,9 @@ exports[`Component Examples renders Persona.CustomCoinRender.Example.tsx correct
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomRender.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomRender.Example.tsx.shot
index 82ddfa07b5272..a233a909b939c 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomRender.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.CustomRender.Example.tsx.shot
@@ -56,9 +56,6 @@ exports[`Component Examples renders Persona.CustomRender.Example.tsx correctly 1
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -226,6 +223,9 @@ exports[`Component Examples renders Persona.CustomRender.Example.tsx correctly 1
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Initials.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Initials.Example.tsx.shot
index 246f1f32d2119..6047a8b67d349 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Initials.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Initials.Example.tsx.shot
@@ -52,9 +52,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -136,6 +133,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -272,9 +272,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -356,6 +353,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -492,9 +492,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -576,6 +573,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -712,9 +712,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -796,6 +793,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -932,9 +932,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1016,6 +1013,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1151,9 +1151,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1250,6 +1247,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1385,9 +1385,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1469,6 +1466,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1604,9 +1604,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1703,6 +1700,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -1838,9 +1838,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -1937,6 +1934,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -2072,9 +2072,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -2171,6 +2168,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -2306,9 +2306,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -2390,6 +2387,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -2525,9 +2525,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -2609,6 +2606,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -2744,9 +2744,6 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
     style={
       Object {
         "height": 150,
@@ -2846,6 +2843,9 @@ exports[`Component Examples renders Persona.Initials.Example.tsx correctly 1`] =
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Presence.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Presence.Example.tsx.shot
index 208a139e37616..c7a21ea88902d 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Presence.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.Presence.Example.tsx.shot
@@ -132,9 +132,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -203,6 +200,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -280,9 +280,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -416,9 +413,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -578,9 +572,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -811,9 +802,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -900,6 +888,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -977,9 +968,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -1131,9 +1119,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -1312,9 +1297,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -1586,9 +1568,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -1657,6 +1636,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -1734,9 +1716,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -1870,9 +1849,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -2034,9 +2010,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -2269,9 +2242,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -2358,6 +2328,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -2435,9 +2408,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -2589,9 +2559,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -2771,9 +2738,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -3046,9 +3010,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -3117,6 +3078,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -3194,9 +3158,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -3330,9 +3291,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -3486,9 +3444,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -3713,9 +3668,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -3802,6 +3754,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -3879,9 +3834,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -4033,9 +3985,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -4208,9 +4157,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -4476,9 +4422,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -4547,6 +4490,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -4624,9 +4570,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -4760,9 +4703,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -4922,9 +4862,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -5155,9 +5092,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -5244,6 +5178,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -5321,9 +5258,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -5475,9 +5409,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -5656,9 +5587,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -5888,9 +5816,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -5982,6 +5907,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+              &:hover {
+                color: #201f1e;
+              }
           dir="auto"
         />
         <div
@@ -6059,9 +5987,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -6218,9 +6143,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -6407,9 +6329,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
           & .contextualHost {
             display: none;
           }
-          &:hover $primaryText {
-            color: #201f1e;
-          }
     >
       <div
         className=
@@ -6687,9 +6606,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -6776,6 +6692,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -6853,9 +6772,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -7007,9 +6923,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -7182,9 +7095,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -7428,9 +7338,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -7517,6 +7424,9 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
               dir="auto"
             />
             <div
@@ -7594,9 +7504,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -7748,9 +7655,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -7929,9 +7833,6 @@ exports[`Component Examples renders Persona.Presence.Example.tsx correctly 1`] =
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.UnknownPersona.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.UnknownPersona.Example.tsx.shot
index 3554910f50faf..909710c721656 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.UnknownPersona.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Persona.UnknownPersona.Example.tsx.shot
@@ -52,9 +52,6 @@ exports[`Component Examples renders Persona.UnknownPersona.Example.tsx correctly
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -151,6 +148,9 @@ exports[`Component Examples renders Persona.UnknownPersona.Example.tsx correctly
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
@@ -256,9 +256,6 @@ exports[`Component Examples renders Persona.UnknownPersona.Example.tsx correctly
         & .contextualHost {
           display: none;
         }
-        &:hover $primaryText {
-          color: #201f1e;
-        }
   >
     <div
       className=
@@ -355,6 +352,9 @@ exports[`Component Examples renders Persona.UnknownPersona.Example.tsx correctly
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+            &:hover {
+              color: #201f1e;
+            }
         dir="auto"
       >
         <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/SelectedPeopleList.Controlled.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/SelectedPeopleList.Controlled.Example.tsx.shot
index 5872b10fa5112..2975668172671 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/SelectedPeopleList.Controlled.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/SelectedPeopleList.Controlled.Example.tsx.shot
@@ -347,9 +347,6 @@ exports[`Component Examples renders SelectedPeopleList.Controlled.Example.tsx co
                     & .contextualHost {
                       display: none;
                     }
-                    &:hover $primaryText {
-                      color: #201f1e;
-                    }
               >
                 <div
                   className=
@@ -431,6 +428,9 @@ exports[`Component Examples renders SelectedPeopleList.Controlled.Example.tsx co
                           text-overflow: ellipsis;
                           white-space: nowrap;
                         }
+                        &:hover {
+                          color: #201f1e;
+                        }
                     dir="auto"
                   >
                     <div
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Shimmer.LoadData.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Shimmer.LoadData.Example.tsx.shot
index 83218267c77dc..e63004dce0c49 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Shimmer.LoadData.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Shimmer.LoadData.Example.tsx.shot
@@ -975,9 +975,6 @@ exports[`Component Examples renders Shimmer.LoadData.Example.tsx correctly 1`] =
             & .contextualHost {
               display: none;
             }
-            &:hover $primaryText {
-              color: #201f1e;
-            }
       >
         <div
           className=
@@ -1125,6 +1122,9 @@ exports[`Component Examples renders Shimmer.LoadData.Example.tsx correctly 1`] =
                   text-overflow: ellipsis;
                   white-space: nowrap;
                 }
+                &:hover {
+                  color: #201f1e;
+                }
             dir="auto"
           />
           <div
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap
index 2c2d623e9abd8..154bf3dbec16c 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap
@@ -239,9 +239,6 @@ exports[`PeoplePicker renders correctly with preselected items 1`] = `
                     & .contextualHost {
                       display: none;
                     }
-                    &:hover $primaryText {
-                      color: #201f1e;
-                    }
               >
                 <div
                   className=
@@ -370,6 +367,9 @@ exports[`PeoplePicker renders correctly with preselected items 1`] = `
                           text-overflow: ellipsis;
                           white-space: nowrap;
                         }
+                        &:hover {
+                          color: #201f1e;
+                        }
                     dir="auto"
                   >
                     <div