FYI, If this doesn't work, you will know by the green background on the link. It will show on click and stay if you hit the back button on mobile.
On desktop it should act as a normal hover should. LMK. HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jan 9, 2016, at 10:55 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > Hey Tom, > I would take any styling off of the hover states of your links so they are > blank on hover > and then create a class from that hover state you previously had > and with a jQuery helper function, add and remove the class if it is mobile. > > I wrote up a quick example that works, or it works on my iPhone5 anyway. > Don't have an Android device or tablet of any kind atm. > View the source for the code. > > http://designdrumm.com/NoHoverOnMobile.html > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > On Jan 9, 2016, at 9:45 PM, Tom Livingston <tom...@gmail.com> wrote: > >> My point wasn't to mimic hover on mobile. I was asking how to set up hover >> for desktop but avoid having them fire on some mobile devices needlessly. >> Putting hover styles a a wide desktop breakpoint isn't foolproof but seems >> the least convoluted. Any other ideas? >> >> >> >> On Saturday, January 9, 2016, Karl DeSaulniers <k...@designdrumm.com> wrote: >> You don't. >> >> You can but that is a little silly IMO. >> Hover is a mouse event meant for interaction with a mouse. >> Until the screen can detect your finger hovering over it, there is no need >> to set hover for mobile. >> I know this statement may come with a backlash from some evangelicals, >> however think about it. >> Do you put wings on a car just because you can? Just for looks? >> >> Design for your device. Leave the mouse events for the mouse and the click >> events for mobile to turn into tap events. >> If you really must have hover events on mobile, then javascript/jQuery is >> the way to go. >> it includes setting a timeout to see if their finger has stayed on the >> screen for so long past a click. >> >> Best, >> >> Karl DeSaulniers >> Design Drumm >> http://designdrumm.com >> >> >> >> On Jan 8, 2016, at 9:49 AM, Tom Livingston <tom...@gmail.com> wrote: >> >>> List, >>> >>> How do you handle hover events on touch devices? >>> >>> For example, a button whose bg color changes on hover. On iOS, the >>> hover change happens on tap. Not really a big deal but I'm not a fan >>> of this personally. Is it just a matter of moving the hover styles to >>> a wider breakpoint? This seems simplistic, but technically would work >>> provided you don't mind hover effects not working if you narrowed your >>> browser window enough. I'd rather not add script just for this issue. >>> Am I missing another simple solution? >>> >>> Thanks >>> >>> -- >>> >>> Tom Livingston | Senior Front End Developer | Media Logic | >>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >>> >>> >>> #663399 >>> ______________________________________________________________________ >>> css-discuss [css-d@lists.css-discuss.org] >>> http://www.css-discuss.org/mailman/listinfo/css-d >>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>> List policies -- http://css-discuss.org/policies.html >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> -- >> >> Tom Livingston | Senior Front End Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >> >> >> #663399 >> > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
