put all :hover styles within @media (hover: hover)

scss/_badge.scss

@@ -47,8 +47,7 @@
 
 // Hover state, but only for links
 a.badge {
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $badge-link-hover-color;
     text-decoration: none;
     cursor: pointer;

scss/_button-group.scss

@@ -14,12 +14,14 @@
     float: left;
 
     // Bring the "active" button to the front
-    &:hover,
     &:focus,
     &:active,
     &.active {
       z-index: 2;
     }
+    @include hover {
+      z-index: 2;
+    }
   }
 }
 

scss/_buttons.scss

@@ -29,8 +29,9 @@
     }
   }
 
-  &:hover,
-  &:focus,
+  @include hover-focus {
+    text-decoration: none;
+  }
   &.focus {
     text-decoration: none;
   }
@@ -94,21 +95,21 @@
     @include box-shadow(none);
   }
   &,
-  &:hover,
   &:focus,
   &:active {
     border-color: transparent;
   }
-  &:hover,
-  &:focus {
+  @include hover {
+    border-color: transparent;
+  }
+  @include hover-focus {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
     background-color: transparent;
   }
   &:disabled,
   fieldset[disabled] & {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $btn-link-disabled-color;
       text-decoration: none;
     }

scss/_card.scss

@@ -20,8 +20,10 @@
     margin-left: .75rem;
   }
 }
-.card-link:hover {
+.card-link {
+  @include hover {
     text-decoration: none;
+  }
 }
 
 
@@ -89,10 +91,11 @@
   .card-blockquote > footer {
     color: rgba(255,255,255,.65);
   }
-  .card-link:hover,
-  .card-link:focus {
+  .card-link {
+    @include hover-focus {
       color: #fff;
     }
+  }
 }
 
 

scss/_carousel.scss

@@ -115,8 +115,7 @@
   }
 
   // Hover/focus state
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $carousel-control-color;
     text-decoration: none;
     outline: 0;

scss/_close.scss

@@ -12,8 +12,7 @@
   text-shadow: $close-text-shadow;
   opacity: .2;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $close-color;
     text-decoration: none;
     cursor: pointer;

scss/_custom-forms.scss

@@ -182,10 +182,11 @@
 }
 
 // Hover state
-// Uncomment if you need it, but be aware of the sticky iOS states.
-// .select select:hover {
-//   background-color: #ddd;
-// }
+.select select {
+  @include hover {
+    background-color: #ddd;
+  }
+}
 
 
 // Media query to target Firefox only
@@ -223,12 +224,12 @@
     content: "";
     background-color: #eee;
   }
-  .select select:hover,
-  .select select:focus,
-  .select select:active {
+  .select select {
+    @include hover-focus-active {
       color: #555;
       background-color: #eee;
     }
+  }
 }
 
 // File

scss/_dropdown.scss

@@ -67,8 +67,7 @@
 
 // Hover/Focus state
 .dropdown-menu > li > a {
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $dropdown-link-hover-color;
     text-decoration: none;
     background-color: $dropdown-link-hover-bg;
@@ -77,9 +76,7 @@
 
 // Active state
 .dropdown-menu > .active > a {
-  &,
-  &:hover,
-  &:focus {
+  @include plain-hover-focus {
     color: $dropdown-link-active-color;
     text-decoration: none;
     background-color: $dropdown-link-active-bg;
@@ -92,15 +89,12 @@
 // Gray out text and ensure the hover/focus state remains gray
 
 .dropdown-menu > .disabled > a {
-  &,
-  &:hover,
-  &:focus {
+  @include plain-hover-focus {
     color: $dropdown-link-disabled-color;
   }
 
   // Nuke hover/focus effects
-  &:hover,
-  &:focus {
+  @include hover-focus {
     text-decoration: none;
     cursor: $cursor-disabled;
     background-color: transparent;

scss/_input-group.scss

@@ -143,9 +143,7 @@
       margin-left: -1px;
     }
     // Bring the "active" button to the front
-    &:hover,
-    &:focus,
-    &:active {
+    @include hover-focus-active {
       z-index: 2;
     }
   }

scss/_labels.scss

@@ -28,8 +28,7 @@
 
 // Add hover effects, but only for links
 a.label {
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $label-link-hover-color;
     text-decoration: none;
     cursor: pointer;

scss/_list-group.scss

@@ -51,8 +51,7 @@ a.list-group-item {
   }
 
   // Hover state
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $list-group-link-hover-color;
     text-decoration: none;
     background-color: $list-group-hover-bg;
@@ -61,9 +60,8 @@ a.list-group-item {
 
 .list-group-item {
   // Disabled state
-  &.disabled,
-  &.disabled:hover,
-  &.disabled:focus {
+  &.disabled {
+    @include plain-hover-focus {
       color: $list-group-disabled-color;
       cursor: $cursor-disabled;
       background-color: $list-group-disabled-bg;
@@ -76,11 +74,11 @@ a.list-group-item {
         color: $list-group-disabled-text-color;
       }
     }
+  }
 
   // Active class on item itself, not parent
-  &.active,
-  &.active:hover,
-  &.active:focus {
+  &.active {
+    @include plain-hover-focus {
       z-index: 2; // Place active items above their siblings for proper border styling
       color: $list-group-active-color;
       background-color: $list-group-active-bg;
@@ -96,6 +94,7 @@ a.list-group-item {
         color: $list-group-active-text-color;
       }
     }
+  }
 }
 
 

scss/_mixins.scss

@@ -26,6 +26,7 @@
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/hide-text";
+@import "mixins/hover";
 @import "mixins/image";
 @import "mixins/label";
 @import "mixins/reset-filter";

scss/_nav.scss

@@ -18,8 +18,7 @@
   padding: $nav-link-padding;
   line-height: $line-height-base;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     text-decoration: none;
     background-color: $nav-link-hover-bg;
   }
@@ -29,9 +28,7 @@
   &.disabled {
     color: $nav-disabled-link-color;
 
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $nav-disabled-link-hover-color;
       cursor: $cursor-disabled;
       background-color: transparent;
@@ -62,8 +59,7 @@
     border: 1px solid transparent;
     @include border-radius($border-radius-base $border-radius-base 0 0);
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
     }
   }
@@ -72,9 +68,7 @@
   .active > .nav-link,
   .nav-link.open,
   .nav-link.active {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $nav-tabs-active-link-hover-color;
       background-color: $nav-tabs-active-link-hover-bg;
       border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
@@ -83,9 +77,7 @@
 
   .disabled > .nav-link,
   .nav-link.disabled {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $nav-disabled-link-color;
       background-color: transparent;
       border-color: transparent;
@@ -116,9 +108,7 @@
   .active > .nav-link,
   .nav-link.open,
   .nav-link.active {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $component-active-color;
       cursor: default;
       background-color: $component-active-bg;

scss/_navbar.scss

@@ -69,10 +69,11 @@
   font-size: $font-size-lg;
   line-height: $line-height-computed;
 
-  > a:hover,
-  > a:focus {
+  > a {
+    @include hover-focus {
       text-decoration: none;
     }
+  }
 
   > img {
     display: block;
@@ -95,8 +96,7 @@
   background: none;
   border: 0;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     text-decoration: none;
   }
 }
@@ -223,8 +223,7 @@
   .navbar-brand {
     color: $navbar-default-brand-color;
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-default-brand-hover-color;
       background-color: $navbar-default-brand-hover-bg;
     }
@@ -238,24 +237,19 @@
     > li > a {
       color: $navbar-default-link-color;
 
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-default-link-hover-color;
         background-color: $navbar-default-link-hover-bg;
       }
     }
     > .active > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-default-link-active-color;
         background-color: $navbar-default-link-active-bg;
       }
     }
     > .disabled > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-default-link-disabled-color;
         background-color: $navbar-default-link-disabled-bg;
       }
@@ -264,8 +258,7 @@
 
   .navbar-toggle {
     border-color: $navbar-default-toggle-border-color;
-    &:hover,
-    &:focus {
+    @include hover-focus {
       background-color: $navbar-default-toggle-hover-bg;
     }
     .icon-bar {
@@ -282,9 +275,7 @@
   .navbar-nav {
     // Remove background color from open dropdown
     > .open > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-default-link-active-color;
         background-color: $navbar-default-link-active-bg;
       }
@@ -298,21 +289,19 @@
 
   .navbar-link {
     color: $navbar-default-link-color;
-    &:hover {
+    @include hover {
       color: $navbar-default-link-hover-color;
     }
   }
 
   .btn-link {
     color: $navbar-default-link-color;
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-default-link-hover-color;
     }
     &:disabled,
     fieldset[disabled] & {
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-default-link-disabled-color;
       }
     }
@@ -330,14 +319,12 @@
   .nav-pills > .nav-item > .nav-link {
     color: $navbar-inverse-link-color;
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-link-hover-color;
     }
   }
   .nav-pills > .nav-item > .nav-link {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-link-active-color;
       background-color: $navbar-inverse-link-active-bg;
     }
@@ -351,8 +338,7 @@
 
   .navbar-brand {
     color: $navbar-inverse-brand-color;
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-brand-hover-color;
       background-color: $navbar-inverse-brand-hover-bg;
     }
@@ -366,24 +352,19 @@
     > li > a {
       color: $navbar-inverse-link-color;
 
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-inverse-link-hover-color;
         background-color: $navbar-inverse-link-hover-bg;
       }
     }
     > .active > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-inverse-link-active-color;
         background-color: $navbar-inverse-link-active-bg;
       }
     }
     > .disabled > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-inverse-link-disabled-color;
         background-color: $navbar-inverse-link-disabled-bg;
       }
@@ -398,9 +379,7 @@
   // Dropdowns
   .navbar-nav {
     > .open > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-inverse-link-active-color;
         background-color: $navbar-inverse-link-active-bg;
       }
@@ -409,7 +388,7 @@
 
   .navbar-link {
     color: $navbar-inverse-link-color;
-    &:hover {
+    @include hover {
       color: $navbar-inverse-link-hover-color;
     }
   }
@@ -417,15 +396,13 @@
   .btn-link {
     color: $navbar-inverse-link-color;
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-link-hover-color;
     }
 
     &:disabled,
     fieldset[disabled] & {
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-inverse-link-disabled-color;
       }
     }

scss/_normalize.scss

@@ -94,9 +94,13 @@ a {
 // Improve readability when focused and also mouse hovered in all browsers.
 //
 
-a:active,
-a:hover {
+a {
+  &:active {
+    outline: 0;
+  }
+  @include hover {
     outline: 0;
+  }
 }
 
 // Text-level semantics

scss/_pager.scss

@@ -22,17 +22,22 @@
       border-radius: $pager-border-radius;
     }
 
-    > a:hover,
-    > a:focus {
+    > a {
+      @include hover-focus {
         text-decoration: none;
         background-color: $pager-hover-bg;
       }
     }
+  }
 
   .disabled {
-    > a,
-    > a:hover,
-    > a:focus,
+    > a {
+      @include plain-hover-focus {
+        color: $pager-disabled-color;
+        cursor: $cursor-disabled;
+        background-color: $pager-bg;
+      }
+    }
     > span {
       color: $pager-disabled-color;
       cursor: $cursor-disabled;

scss/_pagination.scss

@@ -39,8 +39,7 @@
 
   > li > a,
   > li > span {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $pagination-hover-color;
       background-color: $pagination-hover-bg;
       border-color: $pagination-hover-border;
@@ -49,9 +48,7 @@
 
   > .active > a,
   > .active > span {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       z-index: 2;
       color: $pagination-active-color;
       cursor: default;
@@ -62,17 +59,15 @@
 
   > .disabled {
     > span,
-    > span:hover,
-    > span:focus,
-    > a,
-    > a:hover,
-    > a:focus {
+    > a {
+      @include plain-hover-focus {
         color: $pagination-disabled-color;
         cursor: $cursor-disabled;
         background-color: $pagination-disabled-bg;
         border-color: $pagination-disabled-border;
       }
     }
+  }
 }
 
 // Sizing

scss/_scaffolding.scss

@@ -72,8 +72,7 @@ a {
   color: $link-color;
   text-decoration: none;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }

scss/_tables.scss

@@ -99,9 +99,11 @@ th {
 // Placed here since it has to come after the potential zebra striping
 
 .table-hover {
-  tbody tr:hover {
+  tbody tr {
+    @include hover {
       background-color: $table-bg-hover;
     }
+  }
 }
 
 

scss/mixins/_background-variant.scss

@@ -5,7 +5,9 @@
   #{$parent} {
     background-color: $color;
   }
-  a#{$parent}:hover {
+  a#{$parent} {
+    @include hover {
       background-color: darken($color, 10%);
     }
+  }
 }

scss/mixins/_buttons.scss

@@ -10,15 +10,22 @@
 //  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
 //  .box-shadow($shadow);
 
-  &:hover,
+  $active-background: darken($background, 10%);
+  $active-border: darken($border, 12%);
+
   &:focus,
   &.focus,
   &:active,
   &.active,
   .open > &.dropdown-toggle {
     color: $color;
-    background-color: darken($background, 10%);
-        border-color: darken($border, 12%);
+    background-color: $active-background;
+        border-color: $active-border;
+  }
+  @include hover {
+    color: $color;
+    background-color: $active-background;
+        border-color: $active-border;
   }
   &:active,
   &.active,
@@ -31,7 +38,6 @@
   &:disabled,
   fieldset[disabled] & {
     &,
-    &:hover,
     &:focus,
     &.focus,
     &:active,
@@ -39,6 +45,10 @@
       background-color: $background;
           border-color: $border;
     }
+    @include hover {
+      background-color: $background;
+          border-color: $border;
+    }
   }
 
   .badge {

scss/mixins/_hover.scss

+@mixin hover {
+  // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+  // Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim
+  @media (hover: hover) {
+    &:hover { @content }
+  }
+}
+
+@mixin hover-focus {
+  &:focus { @content }
+  @include hover { @content }
+}
+
+@mixin plain-hover-focus {
+  &,
+  &:focus {
+    @content
+  }
+  @include hover { @content }
+}
+
+@mixin hover-focus-active {
+  &:focus,
+  &:active {
+    @content
+  }
+  @include hover { @content }
+}

scss/mixins/_label.scss

@@ -4,8 +4,7 @@
   background-color: $color;
 
   &[href] {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       background-color: darken($color, 10%);
     }
   }

scss/mixins/_list-group.scss

@@ -13,18 +13,17 @@
       color: inherit;
     }
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $color;
       background-color: darken($background, 5%);
     }
 
-    &.active,
-    &.active:hover,
-    &.active:focus {
+    &.active {
+      @include plain-hover-focus {
         color: #fff;
         background-color: $color;
         border-color: $color;
       }
     }
+  }
 }

scss/mixins/_table-row.scss

@@ -17,12 +17,26 @@
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover > tbody > tr {
-    > td.#{$state}:hover,
-    > th.#{$state}:hover,
-    &.#{$state}:hover > td,
-    &:hover > .#{$state},
-    &.#{$state}:hover > th {
-      background-color: darken($background, 5%);
+    $hover-background: darken($background, 5%);
+
+    > td.#{$state},
+    > th.#{$state} {
+      @include hover {
+        background-color: $hover-background;
+      }
+    }
+    &.#{$state} {
+      @include hover {
+        > td,
+        > th {
+          background-color: $hover-background;
+        }
+      }
+    }
+    @include hover {
+      > .#{$state} {
+        background-color: $hover-background;
+      }
     }
   }
 }

scss/mixins/_text-emphasis.scss

@@ -4,7 +4,9 @@
   #{$parent} {
     color: $color;
   }
-  a#{$parent}:hover {
+  a#{$parent} {
+    @include hover {
       color: darken($color, 10%);
     }
+  }
 }