twbs/bootstrap — pull request #13049 by cvrebert (2014-03-13 04:20:13+00:00)
Title: Grunt task for prefixing :hover selectors with .no-touch

So, this is one-half of a possible solution to the problem of how mobile browsers treat `:hover` styles (see #12832, among several others).
What this does is add a prefix (`.bs-no-touch`) to every CSS selector that involves `:hover`. The not-yet-complete other half of the fix is to add some JavaScript to detect whether the user-agent has touch functionality, and if not, then add `.bs-no-touch` to the `` (or `

`?) element. (It should be possible to adapt the relevant portion of Modernizr into a tiny JS script for this.) Thus, `:hover` styles are only activated on non-touch devices, preventing the afore-referenced UX problems.

#### Issue: Requires JavaScript
1. Desktop users with JS disabled would not get `:hover` styles.
2. There are some platforms that allow for both touch and non-touch pointer inputs; such platforms would not get hover styles.

Possible mitigation for (1): Add a `.bs-no-js` ``-level class and also autogenerate a `.bs-no-js`-prefixed version of every `:hover` selector.
Downsides of this mitigation:
* Doubles the number of `:hover`-related selectors
* Requires introducing another ``-level class and more JS.
* Shifts the degraded UX to touch devices that have JS disabled

Another possibility is to require the original HTML to have `body.bs-no-touch` and then instead have the JS remove the class if the device supports touch, but that requirement sounds rather intrusive.

#### Some Relevant Links
* Original place where I found this idea: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
* http://leonardburton.co/2013/06/a-better-way-to-implement-hover-states-for-the-responsive-web/

CC: @mdo @twbs/team for discussion