Media Query for hover and how it can help with mobile devices

If you ever built websites that need to behave correctly on mobile phones then you might have found yourself trying to apply styles when its a mobile device as hover doesn't really work on mobile.

Well, I have come across a CSS only way to apply hover styles to active state styles that mobile devices are used to.

Media Queries to the rescue

In the following example we are going to use styled-components commonly used along with React but you can do it with any css prepocessor or even plain css!

There are a ton of media queries that can be used to apply styles to different devices but one prominent way is the hover media query.

The trick is to target two very specific states of hover media query

So without further ado,

import styled, {css} from 'styled-components';

const commonInteractionStyles = css`
  color: white;
  background-color: black;
`;

const Button = styled.button`
    background: red;
    color: green;
    
    @media (hover: none) {
       &:active {
          ${commonInteractionStyles};
       }
    }

    @media (hover: hover) {
       &:hover {
          ${commonInteractionStyles};
       }
    }
`

So what we did above is to save the common styles in a variable and then apply them to both the :active and :hover states.

In cases where :hover state is not supported by the browser then we can use :active state instead.

Conclusion

And there you have it, small but handy CSS trick.