Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS hovers are not working on touch devices

Posted on 2017-08-21
21
High Priority
?
58 Views
Last Modified: 2017-08-21
I have this website:
https://goo.gl/iwpDzp


On touch screen laptops, the navigation will not expand on hover.

This is normal behavior: https://www.useloom.com/share/d4e16705a32c4a28abd238219778ad2d

When you are on a touch screen laptop using the same operating systems and browsers as a regular laptop, the menu will not hover. This is driving me mad and I cannot figure out how to fix it. Any help is appreciated.
0
Comment
Question by:lvollmer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 10
21 Comments
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263794
there is no such thing on tablets like hover :)
you should use click events...
1
 

Author Comment

by:lvollmer
ID: 42263799
Hi HainKurt - the issue is not occurring on tablet/mobile. It is occurring only on touch screen laptops when the user mouses over the navigation item.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263813
do you have a link to the site...
0
Building an interactive eFuture classroom

Watch and learn how ATEN provided a total control system solution including seamless switching matrix switch, HDBaseT extenders, PDU, lighting control to build an interactive eFuture classroom.

 

Author Comment

by:lvollmer
ID: 42263817
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263821
put this on your page and test

console.log (('ontouchstart' in document))

Open in new window


what is your OS?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263826
a simple demo

https://jsfiddle.net/723eaLch/

is this working fine in your test pcs/browsers?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263829
your page have some JS errors, fix that one before going further

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

<script>MktoForms2.loadForm("//app-sj07.marketo.com", "155-NBF-513", 1759);</script>

Open in new window

0
 

Author Comment

by:lvollmer
ID: 42263833
The OS is windows 10 and it is happening in all browsers, *only* on these touch screen laptops. it is so weird. Let me give that a shot and report back.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263834
what tool/library are you using on this nav bar?
0
 

Author Comment

by:lvollmer
ID: 42263844
no dice on the console.log (('ontouchstart' in document)) test. going to look into the JS issue now
0
 

Author Comment

by:lvollmer
ID: 42263848
on which page did you find this error? I can't find it on the homepage or a few others that I checked

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

<script>MktoForms2.loadForm("//app-sj07.marketo.com", "155-NBF-513", 1759);</script>
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263857
please ignore that error :)

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

Open in new window


it is coming from my AD Blocker, which blocked some part of your page and your js failed because of that...
If I disable AD Blocker, no error on your page...
0
 

Author Comment

by:lvollmer
ID: 42263859
got it, ok thanks.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263860
what happens if you disable touch pad on that pc?
or detach mouse? any difference in behavior?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42263873
in chrome, emulation window, you can add many devices and debug your page

check this screenshotScreenshot---21_08_2017---3_31_58-PM.pngthen here, play with settings, or add a custom device and see what property of the device is causing this issue...
0
 

Author Comment

by:lvollmer
ID: 42263912
what happens if you disable touch pad on that pc?
or detach mouse? any difference in behavior?

No difference

Would you mind expanding that screenshot a little bit so I can see where you grabbed the emulation window? I have been trying to find that tab for 2 hours and just can't find it
0
 

Author Comment

by:lvollmer
ID: 42263946
nevermind, I found it. still can't figure out how to fix it, though.
0
 
LVL 59

Accepted Solution

by:
HainKurt earned 3000 total points
ID: 42263954
maybe it cannot be fixed
maybe it is a bug on browser
maybe it is how it is designed...

issue is os is reporting itself to browser and browser works according to that information...

if os says "I am tablet" browser removes all hover effects...
0
 

Author Closing Comment

by:lvollmer
ID: 42263984
I am convinced this is a OS/hardware issue. thanks for a second set of eyes.
0
 
LVL 9

Expert Comment

by:Brandon Lyon
ID: 42263989
The reason that hovers work on mobile devices is because they're touch-first devices. Laptops and desktops are mouse-first devices. Whatever is the primary pointing device gets the hover.

HainKurt's first answer is the most technically correct. When designing an interface that needs to be usable on a touch device, you should be using clicks and toggles instead of hovers.
0

Featured Post

Take our survey for a chance to win!

As a valued customer of Targus, we’d like to ask you a few questions about us. As thanks, you will be automatically entered for a chance to win a $500 VISA gift card. To enter, just complete the survey by September 15, 2017.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question