гиперссылка изображения не работает

Question

У меня возникают проблемы при попытке разрешить пользователям щелкнуть изображение и открыть ссылку, когда есть накладка на парении

Вот an example моей проблемы

Первая версия не потому что он затенен на зависании. Во второй версии все это работает, потому что не заштрихованы

<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> 

Так как я делаю первый вариант с гиперссылками, чтобы остаться в затененных?

Answer 1

Используя табличный макет is bad semantics, постарайтесь не использовать его. Ваш код очень запутанный и вам не хватает пары закрытий </div> s. Вы должны рассмотреть возможность реструктуризации своего кода, чтобы сделать его более понятным и понятным, но это другой вопрос.

Что касается вашего вопроса, вы не можете щелкнуть изображение, потому что вы накладываете изображение на другой элемент, таким образом, вы больше не щелкнув элемент, который вы хотите щелкнуть по нему. В современных браузерах, это может быть исправлено путем применения pointer-events:none к накладке, что позволяет все связанные с мышью событие, которые должны применяться на нижележащих элементах

В старых браузерах, вы должны использовать similar but more involved approach

Working demo (для новых только браузеры)