javascript - Disable Anchor Within Hover Div on Mobile Until Open -

i've searched high , low can't find solution exact problem.

on desktop browser, when user hovers on image, div appears , can click link within div if want. however, on mobile device, hover triggered click. if user clicks in right spot, though div isn't visible yet, can accidentally click anchor , navigate away page. (in other words, div goes display:none display:block @ same time link clicked.)

i want prevent accidental click happening on mobile browsers, still want link usable once div visible.

my code:

<style>   .staffpic {     position: relative;     width: 33.33333%;     height: auto;   }   .staffpic:hover .popup {       display: block;   }   .staffpic img {       display: block;       width: 110px;       height: 110px;       margin: 0 auto;   }   .popup {       display:none;       position: absolute;       bottom: 0;       left: -5px;       width: 100%;       height: 100%;       box-sizing: border-box;       padding: 15px;       background-color: rgba(255, 153, 0, 0.9);       color: #fff;       text-transform: uppercase;   } </style>  <div class="staffpic">   <img src="/wp-content/uploads/image.jpg" />   <div class="popup">     john smith, director<br/>     cityname | <a href="mailto:johnsmith@example.com">email john</a>   </div> </div> 

any ideas? html, css, js , jquery solutions welcome! (maybe more clever can think of using pointer-events:none along jquery?)

i'm encounter same problem in project, , jotted down potential solution. haven't tested yet might out. link should trigger if element has display that's not 'none':

var popup = $('.popup'),     display = popup.css('display');  if (!(display === 'none')) {   popup.on('click', function(e) {     e.preventdefault();   }); }