You can style a link only when it is both focused and hovered using a combined CSS pseudo-class selector. This allows you to apply specific styles only when both interaction states are active simultaneously.

Key Points

1
Chain pseudo-classes like :hover and :focus together to target elements in both states.
2
This combination improves accessibility and user experience when navigating with both mouse and keyboard.
3
The order of pseudo-classes in the selector does not matter; a:focus:hover and a:hover:focus are equivalent.

Example: Highlight a Link When Both Focused and Hovered

In this example, the link changes color when hovered, shows an outline when focused, and highlights with a background color only when both conditions are met. This ensures clear visual feedback for users using both mouse and keyboard navigation.

Best Practices

1
Use :focus for keyboard accessibility and :hover for mouse interaction.
2
Combine them carefully to enhance interactivity without overwhelming the design.
3
Always maintain visible focus indicators for accessibility compliance.
4
Test with both mouse and keyboard to ensure consistent behavior.

Difficulty: 6/10

Topics: CSS pseudo-classes, focus-visible, hover-state conflicts

Scenario Questions

0-2 years experience

1
How would you write CSS to highlight a link only when a user is both tabbing to it and hovering over it with a mouse?
2
What happens if you use :focus:hover instead of :focus-visible:hover — why might that break accessibility?

2-5 years experience

1
Our link highlights appear even when users navigate with a keyboard — how would you debug and fix this without breaking screen reader usability?
2
A designer says the link should highlight on hover but not on focus — but our accessibility audit says otherwise. How do you reconcile this?

5-8 years experience

1
We have a complex navigation component where links are dynamically rendered — how would you ensure the :focus-visible:hover style doesn’t cause layout shifts or performance jank on low-end devices?
2
In our design system, hover styles are inherited from a global theme — how would you isolate the focused-and-hovered state without creating specificity wars or breaking other components?

8+ years experience

1
We’re migrating from a legacy CSS framework that uses JavaScript to simulate hover+focus states — how would you architect a clean, scalable CSS-only replacement that survives cross-team adoption and future accessibility regulations?
2
Our component library is used across 15+ products with different accessibility policies — how do you design the hover+focus highlight behavior to be configurable, testable, and maintainable at scale without forcing a one-size-fits-all solution?

Follow-up Questions

❓What happens if the link is inside a modal that traps focus?
❓How would you handle this if the design system already uses :focus for outline styles?
❓Would this behave differently on mobile touch devices?