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 > <javascript:;>> 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 <javascript:;>] > > 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 <javascript:;>] > 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/
