Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS hovers are not working on touch devices

Posted on 2017-08-21
21
High Priority
?
82 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
  • 10
  • 10
21 Comments
 
LVL 61

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 61

Expert Comment

by:HainKurt
ID: 42263813
do you have a link to the site...
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:lvollmer
ID: 42263817
0
 
LVL 61

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 61

Expert Comment

by:HainKurt
ID: 42263826
a simple demo

https://jsfiddle.net/723eaLch/

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

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 61

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 61

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 61

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 61

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 61

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 10

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

824 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