Touching on :hover states

Submitted by daniel on Thu, 28/11/2013 - 11:54

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!

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/css:

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


element:hover, element:active {

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-user-select: none;

-webkit-touch-callout: none


There may be more elegant solutions but my undersatnding is that this adds a 'touchstart' event listener:

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.


In other words it adds touchstart as an eventlistener to the dom, thats somehow with the combination of the -webkit specific css. So -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.

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. 

And there is also an issue regarding use of opacity only on transitions. On desktop you have to use display block perhaps to set the initial transition state, however on idevice this is not necessary and will infact 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 agaent 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; }


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.




Submitted by leminh (not verified) on Sat, 24/05/2014 - 18:04


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

Submitted by daniel on Sat, 16/03/2019 - 14:45



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.

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.

Finally regarding


-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.




Add new comment