Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

hover-media-query

See original GitHub issue

I was looking into hover-media-query, which landed in bootstrap 4 at some point in the past. There is even a little snippet of documentation about it here:

https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#sticky-hoverfocus-on-mobile

However, it appears that this $enable-hover-media-query is commented out in the src scss file and has no effect.

I was hopeful that the hover classes could be controlled with something like .touch on the <body> element, but it doesn’t appear that this class works that way, as the mixin is inside of the element and can’t be escaped…

Aside from this, as you probably know, the hover media query has two problems:

It isn’t supported in Safari (solved by using your shim https://github.com/twbs/mq4-hover-shim)
It doesn’t really “work” for multiple-input devices, where a user could touch and mouse

After reading https://codepen.io/MillerTime/post/prepend-body-classes-to-nested-selectors-sass-mixin, I realized the same thing as the author: That you can use the & anywhere in the selector, and easily create body .no-touch classes using the existing hover mixin within bootstrap.

I propose that this could land in bootstrap easily by means of a simple selector like:

https://github.com/twbs/bootstrap/pull/25181

Now all I need to do is set the variable in my own personal custom variables file, e.g.:

$enable-hover-selector: ':not(body.touch)'

Works great!

Issue Analytics

State:
Created 6 years ago
Comments:15 (15 by maintainers)

Top GitHub Comments

1reaction

patrickhlaukecommented, Jan 4, 2018

some more background info: https://gauntface.com/blog/2013/12/09/focusing-on-the-web-today and https://developers.google.com/web/fundamentals/design-and-ux/input/touch/#respond_to_element_states

0reactions

mdocommented, Apr 1, 2018

We removed the hover-media-query awhile back, so I think this is safe to close. Let me know if it needs to be re-opened to track a particular change for us.