i have client site has project gallery in each project displayed in grid layout of square divs inside of them "front" div displays image of project , project title , "back" div has additional information , links. "back" div revealed on hover via css (the front hidden on hover).
now want layout behave way on mobile devices- tap anywhere in div reveal "back" of div. works in ios due native tap reveal hover effect behavior. works great on android if tap places on project div. issue there various links in "back" div , on chrome android if tap right 1 of links in hidden div, clicks through link. (i believe because hover effect happens instantly)
the functionality have tap reveal div before can click on links inside of it. possible?
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"); body { padding: 20px; } a:hover { text-decoration: none; color: #962a46; } .project-wrapper { position: relative; width: 400px; height: 400px; background-color: #ccc; font-family: sans-serif; cursor: pointer; } .project-wrapper:hover .back { display: block; } .front { background-color: #ddd; background-image: url(https://placeimg.com/500/500/arch); background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; } .front .project-title { position: absolute; bottom: 35px; left: 35px; margin: 0; } .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f1f1f1; display: none; padding: 30px; } .back .project-links { position: absolute; bottom: 30px; right: 30px; } .project-links { display: inline-block; vertical-align: bottom; width: 100px; text-align: center; font-size: 16px; margin-left: 20px; } .glyphicon { font-size: 30px; display: block; margin-bottom: 10px; }<div class="project-wrapper"> <div class="front"> <h1 class="project-title"> project title </h1> </div> <div class="back"> <h2 class="project-title"> <a href="http://www.google.ca" target="_blank">the project title</a> </h2> <p> project size </p> <p> completion date </p> <p> project architects </p> <div class="project-links"> <a href="http://www.google.ca" target="_blank"> <span class="glyphicon glyphicon-th-list"></span> view project page </a> <a href="http://www.google.ca" target="_blank"> <span class="glyphicon glyphicon-book"></span> view project pdf </a> </div> </div> </div>i have tried sorts of things, using pointer-events: none on "back" div, re-enabling pointer events on hover. recreated whole hover effect in jquery see if prevent clicks on inner links had issues couldn't scroll down page anymore because touch events disabled on projects. tried using settimeout add pointer events onto links, tried apply e.preventdefault() on links problem keep running need disabled prior being revealed once div revealed links need clickable again.
Comments
Post a Comment