1 min read

Add hover styles only to non-touch devices

A simple SASS mixin to apply :hover states only to non-touch enabled devices.

Touch devices often show the :hover state when touching an element even though you can’t actually ‘hover’. This can have undesired effects.

Below is a simple @mixin which will make it easier to target hover events within a .no-touch context. You can add the class with Modernizr.

      
        // .no-touch should be applied to the `html` or `body` elements with Modernizr or other script.
      
        @mixin hover {
      
          .no-touch & {
      
            &:hover {
      
              @content;
      
            }
      
          }
      
        }
      
        .panel {
      
          background-color: red;
      
          @include hover {
      
            background-color: blue;
      
          }
      
        }

view raw no-touch.scss hosted with ❤ by GitHub

Play with this gist on SASSMeister

Posted April 06, 2015

	// .no-touch should be applied to the `html` or `body` elements with Modernizr or other script.

	@mixin hover {
	.no-touch & {
	&:hover {
	@content;
	}
	}
	}

	.panel {
	background-color: red;

	@include hover {
	background-color: blue;
	}
	}