0

I am having trouble when trying to allow users to click a picture and open a link when there is an overlay on hover

Here is an example of my problem

The first version does not work because it is shaded on hover. In the second version it all works because it is not shaded 

<div class="li_poster">
  <a href="http://google.com" target="_blank">
    <img src="http://www.logodesignlondon.co.uk/wp-content/uploads/2013/12/google.jpg" alt="google" title="google"/>
  </a>
  <span class="opt"></span>
</div>

So how do I make the first version with hyperlinks to stay in the shaded?

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
user3280454
  • 3
  • 1

1 Answers1

0

Using a tabular layout is bad semantics, try not to use it. Your code is very muddled and you're missing a couple of closing </div>s. You should consider restructuring your code to make it more semantic and readable, but that's a different issue

As for your question, you are unable to click the image because you are overlaying the image with another element, thus you are no longer clicking the element you want to be clicking on it. In modern browsers, this can be fixed by applying pointer-events:none to the overlay, thus allowing all mouse related events to be applied on the underlaying elements

In older browsers, you have to use a similar but more involved approach

Working demo (for new browsers only)

Community
  • 1
  • 1
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147