{Linked:Bug3125921} [BUG] New CSS variables for hover text don't work as expected

[aslynblohm]

Describe the bug This commit: https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/041c71e6cc43880f4e29ce7bdf7f3defef9ccf4d added a few new CSS properties for text color and hover text color. However, the hover text color property (--dropdown-item-text-hover-color doesn't quite work as expected. The color only works when hovering directly over the text, not over the rest of the person card.

https://user-images.githubusercontent.com/115840350/202006218-cd36381c-dc67-4ab2-9e39-021241b7e7ca.mp4

To Reproduce Steps to reproduce the behavior:

1. Go to https://mgt.dev/next/?path=/story/components-mgt-people-picker-styles--custom-css-properties
2. Click on the input to open the flyout
3. Hover over the person name text and then move the cursor over the person's image or to the edge of the selected area
4. See error (that the text changes color as you move the cursor)

Expected behavior The text color should be the hover color whenever someone is hovering over any part of the person card, not just the text of the person card.

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS] all
• Browser [e.g. edge, chrome, safari]: all
• Framework [e.g. react, vue, none]: all
• Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web]: all
• Version [e.g. 0.1]: next
• Provider [e.g. Msal2Provider] (bonus if you share the provider config)

Additional context Add any other context about the problem here.

[ghost]

Hello aslynblohm, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌