StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POdisplay:none links clickable on iPhone
text
Body
copied!<p>On my website (which is run through WordPress), I have a series of clickable image thumbnails. When you hover over a thumbnail, a grey box appears over the thumbnail. This grey box that appears is a clickable link, but only 80% of the grey box is clickable.</p> <p>My issue is how an iPhone reacts to this box when it is clicked. When you click anywhere outside of the 80% region (the clickable region), the grey box appears. This is great. But if you click anywhere within this 80% region, you are automatically brought to the link, instead of the grey box appearing. This may seem a bit confusing in text form, so I drew a picture to showcase my issue: <img src="https://i.imgur.com/VmYFnRg.jpg" alt="iPhone Hover Problem"></p> <p>So say you are on an iPhone, and you see a thumbnail you want to click on. If you click outside of the 80% region, the grey box appears just like it should. But if you click within this 80% region (the region that is the actual link), then you get redirected to the external source without even seeing the grey hover box that should appear. This is the problem. I would like it to work just like how it works on a computer, so if you are on an iPhone and you click anywhere on a thumbnail, the grey hover box should always appear, not redirect you to the external link. Because this 80% region that links a user to an external source on an iphone is set to <code>display:none</code> and is essentially invisible to the user (until you hover over a thumbnail). The user should not be able to click on a link they cannot see.</p> <p>So how would I make it so that the hover grey box always appears when clicked on an iPhone, no matter where on a thumbnail a user clicks? Any suggestions or input would be great.</p> <p><strong><em>Update:</em></strong></p> <p>Here is the jquery that makes the grey divs appear (via <code>opacity</code>)</p> <pre><code>$( document ).ready( function() { $('.entry-image').mouseover(function(){ //show the box $(this).children('.thumbhover').stop().animate({opacity:1},300); }); $('.entry-image').mouseleave(function(){ //hide the box $(this).children('.thumbhover').stop().animate({opacity:0},500); }); </code></pre> <p>I also added <code>display:none</code> to my thumbhover divs in CSS and <code>show()</code> to the jquery so the divs are using not display as well as <code>opacity:0</code> and then when you hover over them, it hads a block display as well as a <code>opacity:1</code></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload