All geek questions in one place

CSS3 hover / tap does not work in mobile browsers

I created a field that freezes in another div when it freezes. All of this was done using CSS3. However, one of the problems that I realized was that the freezes did not work in mobile browsers. Is there a way to somehow make this work mobile or do I need to resort to using some kind of JS?

EDIT: To clarify, I just want to be able to use the field and show the description. I have seen this on other sites. 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 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; }
+6
source share
2 answers

Hovers cannot be installed on mobile devices, because by default there is no constant cursor - the memory of the last affected point.

The only way they can feel the interaction is by touching what looks like a click or selection, therefore :active in CSS or onclick in Javascript are your options at this time.

Nice, 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 simulate a click:

 <body ontouchstart="">
+8
source

Have you really tested your code in a mobile browser? I don’t think so, because, in fact, it works great!

Check it out using the full screen version of your JSFiddle. I just tested it on Android 2.3 using the default browser, Dolphin browser and Opera Classic - no problem at all!

Hover over a problem when you use it to bind tags. The reason is obvious - as soon as you click on the link, you are redirected to another address so that you can’t see the freezing state (it depends on your browser). However, in other situations, the freeze really works, i.e. Hover events fire when clicked.

+1
source

Source: https://habr.com/ru/post/943489/

More articles:


All Articles