how to make A:hover changes happen when tabbing over

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
dianacastillo's picture
Posted by dianacastillo on June 12, 2013 at 8:05pm

If I have a button that changes opacity on a:hover, is there something I can do with css to make the same change in opacity when it is focused on by tabbing to it?

Categories:

Comments

:focus

Posted by Liam Morland on June 12, 2013 at 8:11pm
Liam Morland's picture

:focus

Thanx

Posted by suntog on June 12, 2013 at 8:14pm
suntog's picture

I was struggling with a:hover for touch screens. Focus seems like a good solution for smartphones and tablets.

Examples when looking at D8

Posted by mgifford on June 13, 2013 at 7:29pm
mgifford's picture

There are some examples here (good & bad) from D6 & D7 sites:
https://drupal.org/node/1993574

Not surprisingly, one of the best examples I could find was http://www.paciellogroup.com/

--
OpenConcept | Twitter @mgifford | Drupal Security Guide

Tablet examples

Posted by mgifford on June 13, 2013 at 7:31pm
mgifford's picture

Hi @suntog, do you have any docs on best practices for addressing this with touch interfaces? Since your finger is often over top of it....

--
OpenConcept | Twitter @mgifford | Drupal Security Guide

Hover vs Touch

Posted by suntog on June 13, 2013 at 9:38pm
suntog's picture

I have been having this argument at work now for about a year. The basic problem is that with drop down menus you hover over the parent menu item to get the children to drop down. But if you have a touch screen you never get the dropdowns because you can't hover, or if you can touch the parent menu item, you might either get a dropdown or navigate to another page.

So far the best solution I have been able to devise is to put an invisible toggle behind the parent menu items with a z-index of -1. When the site detects a tablet or smart phone the z-index jumps to 999 and prevents the user from touching the menu link, but instead fires a dropdown toggle.

This means you still have to have the parent menu link as a dropdown menu link, but with css you can hide it for big screens, and even when the invisible toggle is shielding html elements beneath from touch, :hover is still functional in css.

I first use of this solution was not a menu, but for a popup with user info instead of navigating to the user page, which for a smartphone would be an annoying page load.

As a general best practice, I am trying make the user unaware of navigation, which is not easy.