Css3 Hover/Tap Doesn't Work in Mobile Browsers

Changing :hover to touch/click for mobile devices

If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

You'd have to test the FIDDLE in a mobile environment. I can't at the moment.

correction - I just tested in a mobile, it works fine

CSS3 hover effects don't work on mobile browsers

You can rely on this javascript solution:

Zepto

View JsFiddle

View Live Demo

First, download Zepto.js. It's a very light library, which is focused on mobile browsers. For the touch event you will also need the Zepto module touch.js, included in the Zepto src folder.

So all we need is these two files:

+ zepto.js (minified+gzipped: 9.7k)

+ touch.js (non-minified/non-gzipped: 4k)

Zepto supports the following touch events:

tap — fires when the element is tapped.
singleTap and doubleTap — this pair of events can be used to detect both single and double taps on the same element (if you don’t need double tap detection, use tap instead).
longTap — fires when an element is tapped and the finger is held down for more than 750ms.
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — fires when an element is swiped (optionally in the given direction)

NEW CODE:

HTML/JS

<body>
<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

<script src="zepto.js"></script>
<script src="touch.js"></script>
<script>
$('.view').tap(function(){
    if( $(this).hasClass('view-tap') ) {
        $(this).removeClass('view-tap')
    } else {
        $(this).addClass('view-tap')
    }
})

// Prevent any link click, when tap on image
$('.view a').on('click', function(e) {
    if( !$('.view').hasClass('view-tap') ) {
        e.preventDefault()
    }
})
</script>
</body>

CSS (Only the replaced part: Added .view-tap next to each .view:hover)

.view:hover img, .view-tap img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view:hover .description, .view-tap .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup, .view-tap hgroup,
.view:hover p, .view-tap p,
.view:hover a.info, .view-tap a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p, .view-tap p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info, .view-tap a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

The advantage of this approach is that you don't have to worry for cross-browser compatibility and if you need more mobile features in the future, it's just easy to implement them.

How to remove/ignore :hover css style on touch devices

2020 Solution - CSS only - No Javascript

Use media hover with media pointer will help you resolve this issue. Tested on chrome Web and android mobile. I known this old question but I didn't find any solution like this.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

CSS: hover, focus or active not working on mobile devices

A div element cannot be focused without a tab index. See what happens if you set the tab index of one of your divs to being a number.

Hover, of course, makes no sense if the interface is a touch interface. Fingers cannot hover over most touch screens, so I believe most mobile browsers either treat it funny or ignore it.

CSS :hover not working on iOS Safari and Chrome

I found a workaround: if you add onclick="" to the div, the hover will work.

Your html would be:

<link rel="stylesheet" href="hover.css" type="text/css"/>

<div class="video_wrap update">
  <div class="content">
    <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
    <div class="title_wrap" onclick=""><div class="title">bang bang</div></div>
  </div>
</div>

How do I simulate a hover with a touch in touch enabled browsers?

OK, I've worked it out! It involves changing the CSS slightly and adding some JS.

Using jQuery to make it easy:

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

In english: when you start or end a touch, turn the class hover_effect on or off.

Then, in your HTML, add a class hover to anything you want this to work with. In your CSS, replace any instance of:

element:hover {
    rule:properties;
}

with

element:hover, element.hover_effect {
    rule:properties;
}

And just for added usefulness, add this to your CSS as well:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

To stop the browser asking you to copy/save/select the image or whatever.

Easy!

CSS :hover behaviour on touchscreen devices

This is nearly a duplicate of a bunch of questions out there, but I want to address your main points:

By "a hover based dropdown" you mean one that will appear as long as the user has their finger on it? As a mobile user, I can't picture this being a successful UX
All pseudo-classes are here https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes The ones I would consider "interactive" are :active, :checked, :focus, :hover. The trouble with :hover is, as you say, it isn't well supported and, again, it doesn't really fit the way users interact with mobile sites. The trouble with :checked is it relies on checkboxes, which puts pretty severe restrictions on the supported markup.
Definitely mobile Safari doesn't support it, which means it's a big enough problem to matter.

The most common solution is to use javascript touchevents, but if you're going all-CSS that isn't going to work for you.

You may find something useful here Hover effects using CSS3 touch events or here :touch CSS pseudo-class or something similar?

Active' instead of :hover for touch devices

It's simpler to just avoid the opacity effect completely on mobile. That is, set opacity to 1 if the client is on a touch device.