CSS3 hover/tap doesn't work in mobile browsers

Question

I created a box that fades into another div when hovered over. This was all done using CSS3. However, one problem I realized was that the hovers don't work in mobile browsers. Is there a way to somehow make this work for mobile or do I have to resort to using some sort of JS?

EDIT: To clarify, I just want to be able to tap the box and have the description show. I've seen it on other websites. How is this usually done? :)

JS Fiddle: http://jsfiddle.net/ygShH/4/

HTML

<article class="project">
     <div class="project-mask">
          <div class="thumbnail">
               <img src="http://dummyimage.com/292x292/000/fff" alt="desc" height="260" width="260">
               <div class="description">
                    <hgroup>
                         <h2>Title</h2>
                         <h3>Web</h3>
                    </hgroup>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    <span>
                         <a href="http://site.com" target="_blank">Visit website</a>                                <a href="/view-project">View project</a>
                    </span>
               </div>
          </div>
     </div>
</article>

CSS

body {
background:#f4f3f1;
color:#666;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
}

p {
font-size:1.1em;
margin:0 0 1em;
}

h1,h2,h3 {
color:#222;
font-weight:400;
}

h2 {
font-size:1.5em;
margin-top:0;
}

h3 {
font-size:1.1em;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,input,textarea {
display:block;
}

.project {
background:#fff;
float:left;
height:260px;
overflow:hidden;
width:260px;
margin:0 20px 20px 0;
padding:20px;
}

.project-mask {
height:260px;
position:relative;
width:260px;
}

.project-mask .description {
-moz-transition:.3s ease-in-out opacity;
-o-transition:.3s ease-in-out opacity;
-webkit-transition:.3s ease-in-out opacity;
transition:.3s ease-in-out opacity;
background:#f4f3f1;
display:block;
height:220px;
left:0;
opacity:0;
position:absolute;
top:0;
width:220px;
padding:20px;
}

.project-mask:hover .description {
opacity:1;
}

.project-mask .description h2 {
margin-bottom:5px;
}

.project-mask .description h3 {
border-bottom:1px solid #ddd;
color:#777;
margin-bottom:10px;
padding-bottom:10px;
}

There is no hover for mobile browsers. They have yet to detect where you're finger is without having the screen being touched ;) — Cody Guldner, Apr 23 '13 at 23:30
Cody is correct, you need to think of another gesture to hook into. — Chris Love, Apr 23 '13 at 23:31
What is a hover on a mobile device? Most do not have any form of cursor and the lowest level position indicator is a click. You could add some javascript to trigger on click rather than hover on a mobile device. — smitec, Apr 23 '13 at 23:31
I just want to be able to tap the box and have the description show. I've seen it on other websites. How is this usually done? :) — J82, Apr 23 '13 at 23:32
From my experience, the hover gets called once a user pushes on an element, they normally have to then push again to actually click it — Peter Featherstone, Apr 23 '13 at 23:32
[`:active`](http://stackoverflow.com/a/6063367/1176601)? or [`:focus`](https://developer.mozilla.org/en-US/docs/CSS/:focus) seems to have good mobile support too — Aprillion, Apr 23 '13 at 23:33
@CodyGuldner Search for "Galaxy S4 air view demo" and you might be suprised ;) — lqc, Apr 23 '13 at 23:39

nickhar · Answer 1 · 2013-04-24T00:28:54.703

17

Hovers aren't possible on mobile devices as there is no persistent cursor - memory of the last touched point by default.

The only way they can sense interaction is touch, which is akin to a click or selection, so :active in CSS or onclick in Javascript are your only options currently.

Simplistically, in CSS you can define it:

a.class:active {
  background-color: #AAA;
  ...
}

Or:

.class:active {
  background-color: #AAA;
  ...
}

But you need to use the following workaround (or JS events: ontouchstart) to mimic the click:

<body ontouchstart="">

edited Apr 24 '13 at 00:28

answered Apr 23 '13 at 23:35

nickhar

19,981
12
60
73

Thank you. Can you possibly show me an example of how I could incorporate the `:active` state in my JS Fiddle example? – J82 Apr 23 '13 at 23:36
@Desi are you wanting pure css or jquery? – Cody Guldner Apr 23 '13 at 23:42
@Cody I was hoping it could be purely CSS. – J82 Apr 23 '13 at 23:47
@Desi You will need to use the checkbox hack to do it purely with css. That would help with the click – Cody Guldner Apr 23 '13 at 23:49
2

@nickhar I tried adding `:active` like this: `.project-mask:active .description` but it's still not working in mobile browsers. http://jsfiddle.net/ygShH/7/ – J82 Apr 23 '13 at 23:50
@Desi Just seen. Tricky one. I'll look at it now. – nickhar Apr 23 '13 at 23:57
@nickhar Actually, I like how it hovers right now. I just want to be able to mimic a similar behavior in mobile browsers. For example, when I tap the box in a mobile browser, I want it to change into the div with the description. – J82 Apr 24 '13 at 00:08
@desi That's what that last fiddle does 'ontouch' (check on iPhone, but not others). It uses `` – nickhar Apr 24 '13 at 00:09
@nickhar Yeah, I checked and it does activate on touch. However, I don't want to have to hold onto it to view the hidden div. Right now, on both desktop and mobile, I have to hold down the div with my mouse/finger in order to keep the hidden div active. – J82 Apr 24 '13 at 00:11
@desi Maintaining state is more tricky. Worth looking at this: http://stackoverflow.com/questions/4940429/how-to-simulate-active-css-pseudo-class-in-android-on-non-link-elements. You can always use JS. – nickhar Apr 24 '13 at 00:18

CSS3 hover/tap doesn't work in mobile browsers

1 Answers1

Linked

Related