Как расширить функцию кнопки на своем контейнере

Question

<div class="hotspot">
 <div class="productName">Bag</div>
 <div class="productPrice">20$</div>
 <button>Some action</button>
</div>

Мне нужно расширить функцию кнопки на весь контейнер и скрыть ее с непрозрачностью 0.

Это мой код: https://codepen.io/andrew_88/pen/jemBgm.

Мне нужно расширить функциюмоей кнопки на всем контейнере горячей точки, и я хочу скрыть это графически (непрозрачность: 0);Я хочу переключать класс «видимый» только тогда, когда я нажимаю на элемент псевдо :before (красный прямоугольник), а не когда я нажимаю в элемент div (productName, productPrice, button).Я не могу найти решение для этого.

Answer 1

Если я хорошо понял ваш вопрос, вы хотите иметь прослушиватель щелчков на элементе psuedo, что невозможно.Вы можете смоделировать это, используя позицию щелчка.

(function() {
    $("article").each(function() {
        $(this)
            .children(".hotspot")
            .on("touchstart click", function(e) {
                var originalEvent = e.originalEvent;

                if ($(this).hasClass("visible")) {
                    if (originalEvent.layerX < 15 && originalEvent.layerY < 20) {
                        $(this).toggleClass("visible");
                    } else {
                        alert("ciao");
                    }
                } else if (originalEvent.layerX < 15 && originalEvent.layerY < 20) {
                    $(this).toggleClass("visible");
                }
            });
    });
    $(this).toggleClass("visible");

    // $("button").on("click", function() {
    //  alert("ciao");
    // });
})();

Это рабочий код: https://codepen.io/anon/pen/rqmwOX. Я только что изменил часть JS, а также изменил min-width на width.

Надеюсь, это поможет