CodePen

HTML

            
              <div id="wrap" class="hover">
  <header class="header">
    <h1>Hover/Touch Switcher</h1>
    
    <div class="switcher">
       <p>Hover or Touch Device?</p>
      <a href="#" class="touch" title="Touch list"><i class="fa fa-hand-o-up"></i> Touch</i></a>
      <a href="#" class="hover" title="Hover Grid"><i class="fa fa-location-arrow"></i> Hover</a>
    </div>
  </header>
  
  <div class="main">
    
    <p>Here we see an example of a switcher for users to dictate their preference of hover or touch. This helps if you start with a hover-first approach.</p>

      <p>On smaller screens, the selector is in the header, playing the odds that more small screens are touch devices, though certainly not always the case. Otherwise it will be in the footer, where larger screens can scroll to it easier or see it on default. </p>
   
    <p>In this example, the page starts as <code>:hover</code> enabled. Users can change the prefence to touch. On change, the page .wrap container will change the class to either touch or hover. You could always start with touch first for a more conservative approach. </p>
    
    <p>We can even increase the size of our link hit area for the touch selector to accomidate larger finger sizes.</p>
    
    <h2 class="current">Current Prefence: hover</h2>
  </div>
  
  <footer class="footer">
    <p>This site loves cats. &copy; 2013&ndash;2014</p>
  </footer>
 </div>
            
          
!

CSS

            
              @import "compass/css3";

.switcher {
  text-align: center;
  padding-top: 1em;
  @media screen and (min-width:34em){
    float: right;
    text-align: right;
    padding-top: 0;
  }
  @media screen and (min-width: 40em){
    position: absolute;
    bottom: 2em;
    border-top: 1px solid #333;
    padding-top: 1em;
    width: 50%;
    margin: 0 auto;
    left: 25%;
    text-align: center;
  }
  p {
    font-size: 0.875em;
    color: #333;
    position: absolute;
    left: -9999px;
    @media screen and (min-width: 40em){
     position: static;
    }
  }
  a {
    background: #666;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    margin-right: 10px;
    display: inline-block;
    @include transition;
    .touch & {
       padding: 20px 15px;
    }
    .hover &:hover, .hover &:focus {
      outline: 10px solid black;
    }
  }
}

#wrap {
  max-width: 45em;
  margin: 0 auto;
  position: relative;
}

.header {
  padding: 1em;
  background: rgba(0,0,0,0.5);
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
      clear: both;
  }
}

.main {
  min-height: 180px;
  padding: 1em;
  background: rgba(0,0,0,0.3);
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
}

.footer {
  padding: 1em;
  background: rgba(0,0,0,0.5);
  text-align: center;
  @media screen and (min-width: 40em){
   padding-bottom: 8em; 
  }
}

p {
  margin-bottom: 1em;
}

h1 {
  font-size: 2em;
  text-align: center;
   @media screen and (min-width:34em){
    float: left;
    text-align: left;
  }
   @media screen and (min-width:40em){
    float: none;
  }
}

h2 {
  margin-bottom: 1em;
  font-weight: bold;
}

body {
  line-height: 1.4;
}
            
          
!

JS

            
              $(document).on('click', 'div.switcher a', function(e) {
	var wrapClass = $(this).attr('class');
	$('#wrap').removeClass().addClass(wrapClass);
	e.preventDefault();
  $('.current').html('<h2>Current Prefence: '+wrapClass+'</h2>');
});

            
          
!
999px
Loading ..................