Adding focus to buttons in ios

HTML & CSS
1

Hi Guys,
I would like to be able to replicate the hover effect on the circular service icons from the desktop version of this site http://temp.osborneparkautorepairs.com.au/ to smaller touch devices.
Is the focus property used to do this, and if so can someone advise how to add it to my code?

Any help appreciated.

2

Some touch screen devices (and I’m not sure which ones) will use a single tap on a link as “hover” and a second tap to activate, I believe. (Edit: I knew I’d read that somewhere here recently: Css hover not working on IOS/mobile - #3 by PaulOB)

Focus won’t help for touch screen, but it will help for anybody navigating your site using a keyboard, rather than a mouse. Simply add a:focus where you have a rule targeting a:hover. e.g.

#cooling a:hover, #cooling a:focus {background: rgba(0,  0, 0, 0) 
   url("http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/02/sprite-comp.gif")
 repeat scroll 750px 300px;
}
4 Likes
3

Thanks for that, I’ll give it a try.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.