Приветствую
У меня ситуация - есть html код
<div class = 'block'>
<img src = '...'>
</div>
и к нему листы стилей:
.block:after {
// полупрозрачный блок, который лежит полностью над img
}
Я хочу определить, что пользователь нажимает мышкой по картинке
$('.block img').on('click', function(e){});
не срабатывает, потому что мешает этот полупрозрачный :after
Можно ли это как-то обойти?
Те варианты, которые мне пришли в голову, не очень нравятся:
1) вместо article:after
использовать некоторую оболочку/обертку
<div class = 'shell'><img></div>
и обращаться к ней
$('.shell').on('click', function(e){});
недостаток - не хочется плодить лишние теги
2) отслеживать нажатия на .article
и обрабатывать координаты нажатия, проверять, соответствуют ли они координатам img
недостаток - много лишнего js кода, возможно изменение кода, если буду менять устройство .article
Есть ли еще какие-то способы? Или все таки склониться к 1-ому, как самому простому и очевидному?
P.S.
я внутрь картинке добавляю тень, img не позволяет это делать напрямую через свойство box-shadow
, поэтому приходится над картинкой создавать невидимый блок и к нему применять тень (сейчас это :after
, поскольку не требует дополнительных тегов)
after
полностью прикрывает картинку? и еще его размеры больше или ровны размерам картинки?$('.block').on('click', function(e){$(this).children('img')});
так не подойдет. Я в JS не силен но, так будет выбранimg
который вам нужен. Но могу ошибатся