Можно ли включить box-shadow в область div, которая реагирует на событие щелчка?
у меня естьdiv
действуя как круглая кнопка. Он разработан таким образом, что значительная часть его общего внешнего вида происходит отbox-shadow
:
<body style="background:black">
<div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div>
</body>
У меня есть кнопка прослушивания событий, прикрепленная к кнопкеdiv
, К сожалению, он не отвечает, еслиdiv
нажимается наbox-shadow
какbox-shadow
отображается за пределамиdiv
.
Это особенно проблема на сенсорных устройствах, где палец иногда не касается центраdiv
, (Конечно, он реагирует нормально, если щелчок находится в пределах области div в 50 пикселей.)
Можно ли заставить слушателя события реагировать на нажатия наbox-shadow
а также фактическоеdiv
?
Я понимаю, что могу использовать отдельный прозрачный div большего размера поверх кнопки и прикрепить к нему прослушиватель событий, но нужен ли такой обходной путь?
(Кнопкаdiv
должен быть оформлен сbox-shadow
, Я не могу использоватьborder
собственность или увеличениеpadding
.)