Question

I have a page with 5 sublinks having class “searchBySub”
Now in my CSS I have defined normal, hover states as well as a class for clicked
So we have

#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

My Question is when any of these 5 sublinks is clicked on iPad, it goes to the hover state. So is there any way by which I can force it to not go in hover state rather apply the class searchBySubClicked

As the hover state is causing some issues…Please help me. Thank you.

Answer 1

I agree with the media queries, but like so http://css-tricks.com/snippets/css/ipad-specific-css/

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

You could try to undo the hover state in there. However the ideal supposedly is to create the mobile styles first and then create full screen browser styles afterwards within

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
    #leftNav a.searchBySub:hover {...}    
}