Devin Michaelson Devin Michaelson - 3 months ago 8
Android Question

How to Deal with Hover on Touch Screen

First of all, this is what I'm talking about: jsfiddle.

When mouseover the image, you can see 4 icons appear while the image is zoomed in and the background of

.my-caption
turns darker. I've tested this on mobile but it didn't work fine as on desktop. The links under the icons were accessed at the same time of the hover effects as I tapped on the image. I want to make this friendly on touch-screen devices (both Android and iOS) too.

My goal:


  1. When a user taps on the image, the hover effects are activated (icons show, image zoomed and darkened bg). And if the user taps on the image again or taps elsewhere outside the image, the hover effects are deactivated (back to normal state).

  2. The links under the icons can be accessed only when the user taps on the icons (secondary tap).



How can I achieve this using CSS or simple JS? Thanks for your help.

ps. I must credit to Mary Lou for this awesome hover effect used.

Answer

The ideal way to do this is to apply the same style to :focus as you do to :hover

.element {
  background-color: #F00;
}

.element:hover, .element:focus {
  background-color: #0F0;
}

How it should work in your code:

.my-item:hover img,
.my-item:focus img,
.my-item:active img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.my-item:hover .my-caption, .my-item:focus .my-caption {
  background: rgba(0, 0, 0, 0.75);
}
Comments