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

            
              .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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

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>');
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................