Skip to main content
Submitted by daniel on

For years now web designers and developers have been utilising the :hover pseudo class to add life to their website or project. This is quite a common convention and is tradionally used to give hyperlinks diffferent states, but is not restricted to use just on hyperlinks (apart from say older browsers) .

The :hover selector is used to select elements when you mouse over them.

Tip: The :hover selector can be used on all elements, not only on links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the:active selector to style the active link.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

http://www.w3schools.com/cssref/sel_hover.asp

Ok, but what about touch devices? There is no mouse, so how do we handle hover on these devices?

Touch Design?

There are different approaches to handling mobile touch and now tablet devices such as Apples successful and innovative iPhone and iPad. WIth more and more people now accessing the internet on these devices, there are a number of approaches a designer or developer can take to mobile that range from:

  • tweaking existing site to make sure it works on these devices
  • creating a mobile specific site
  • creating an app that fully integrates with the idevice in question

Another approach also worth mentioning seems to have gained acceptance amongst the development and design community is Responsive Design. This approach has various pros and cons but one benefit is that Front End Developers can now utilise media queries.  These are now supported on all modern browsers and enable the browser to load different styles depending on its viewport and other parameters. Essentially this enables the developer to change the UI depending on the users viewport. 

For responsive design to work well, there are a number of issues, such as really thinking about mobile first, despite designers and indeed clients still in the mindset of desktop which have traditionally made up the majority of their user base, and in fact this may still be the case. In this sense it is counter intuitive and means having to think about mobile from te ground up, rather than as a something we can tweak after the main site is launched!

One reason responsive design has become so popular is that it is cheaper. It is cheaper to tweak an existing site for mobile using media queries, and this is often the driving force. So going back to our initial discussion regarding hover states , how do we enable these for our touch users so they can access the same features on their iGadget as they can on their Desktop or Laptop etc.?

One option is to use the following javascript to adds a 'touchstart' event listener to the DOM:

<script> document.addEventListener("touchstart", function(){}, true); </script>

Why use addEventListener?

addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:

  • It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used.
  • It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
  • It works on any DOM element, not just HTML elements.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

and css to enable you to stimulate a hover on the hover and active states.

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none
}

http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers

With the use of  -webkit specific prefixed css we can target ios devices.. 

-webkit-tap-highlight-color overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iPhone. 

-webkit-touch-callout disables the standard ui when you select a link on your itouch device while 

-webkit-user-select disables the ability to copy and paste links, and instead treat them similarly to how you treat them on desktop devices. 

Ok  so we can see that by use of minimal javascript and css, we can add support for hover events on touch devices.

http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers

Using transitions and double tap!

It is also worth mentioning css transitions and the use of hover on touch devices. There is a feature on touch devices called double tap.

It seems that the good people at Apple were very concerned about controls being hidden and only displayed on hover in webpages. Whenever you run into this situation, where an element is initially hidden and then displayed on hover, you will run into the double tap issue. The first tab will display the change in element and the second tap will navigate. If you then tap somewhere else on the screen, the :hover rule is no longer applied and you need to start the sequence over againth.

However there is also an issue when using in combination with css transitions, something that is supported on idevices.

http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ 

On desktop you have to use display block perhaps to set the initial transition state, however on idevice this is not necessary and will in-fact cause double tap with transition to stop working correctly. One solution is to replace display:block for the initial state with visibility: hidden, and then on desktop using say either media queries or a user agent class, add the use of display block, which will have opacity set to 0 to create an initial state for your transition. 

.mydiv { 
	visibility:hidden; 
	opacity: 0; 
	transition: all 1s ease-out; 
	-webkit-transition: all 1s ease-out; 
	-moz-transition: all 1s ease-out; 
	-o-transition: all 1s ease-out; 
} 

.mydiv:hover { 
	visibility:visible; 
	opacity: 1; 
} 
.mydiv:active { 
	-webkit-transition: opacity 1s ease-out; 
}

http://stackoverflow.com/questions/7548833/ios-css-opacity-visibility-transition

Conclusion

So as discussed using a combination of Javascript, CSS and media queries or similar, it is possible for your touch users to experience something close to that of your desktop users.

 

Comments

leminh (not verified)

thanks so much borther!
document.addEventListener("touchstart", function(){}, true);
and div:hover, div:active
------>> it so good work, thanks so much again!!

Sat, 24/05/2014 - 18:04 Permalink
daniel

UPDATE

Ok there is a better way of handling hover states on a touch device. Simply add the following on any element.

cursor: pointer;

On iOS this will enable double tap. Much better than a more expensive custom behaviour.

Also with regards the use of 

-webkit-touch-callout: none

The -webkit-touch-callout CSS property controls the display of the default callout shown when you touch and hold a touch target.

When a target is touched and held on iOS, Safari displays a callout information about the link. This property allows disabling that behavior.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

Also with regards

-webkit-user-select: none

The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as chrome, except in textboxes.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Finally regarding

-webkit-tap-highlight-color

-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-…

 

 

 

Sat, 16/03/2019 - 14:45 Permalink
MaryMn4443 (not verified)

XEvil 6.0 automatically solve most kind of captchas,
Including such type of captchas: ReCaptcha v.2, ReCaptcha-3, Hotmail, Google captcha, SolveMedia, BitcoinFaucet, Steam, +12k
+ hCaptcha supported in new XEvil 6.0!

1.) Fast, easy, precisionly
XEvil is the fastest captcha killer in the world. Its has no solving limits, no threads number limits
you can solve even 1.000.000.000 captchas per day and it will cost 0 (ZERO) USD! Just buy license for 59 USD and all!

2.) Several APIs support
XEvil supports more than 6 different, worldwide known API: 2captcha.com, anti-captchas.com (antigate), RuCaptcha, DeathByCaptcha, etc.
just send your captcha via HTTP request, as you can send into any of that service - and XEvil will solve your captcha!
So, XEvil is compatible with hundreds of applications for SEO/SMM/password recovery/parsing/posting/clicking/cryptocurrency/etc.

3.) Useful support and manuals
After purchase, you got access to a private tech.support forum, Wiki, Skype/Telegram online support
Developers will train XEvil to your type of captcha for FREE and very fast - just send them examples

4.) How to get free trial use of XEvil full version?
- Try to search in Google "Home of XEvil"
- you will find IPs with opened port 80 of XEvil users (click on any IP to ensure)
- try to send your captcha via 2captcha API ino one of that IPs
- if you got BAD KEY error, just tru another IP
- enjoy! :)
- (its not work for hCaptcha!)

WARNING: Free XEvil DEMO does NOT support ReCaptcha, hCaptcha and most other types of captcha!

http://XEvil.Net/

Sun, 13/08/2023 - 09:07 Permalink

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.