Touching on :hover states

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.