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: css for on focus
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?
Comments
:focus
:focus
Thanx
I was struggling with a:hover for touch screens. Focus seems like a good solution for smartphones and tablets.
Examples when looking at D8
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
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
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.