Условие дисплей нан о том, что элемент скрыт для взаимодействия с пользователем. При опасити 0 и визибле хиден можно кликать по блоку

pointer-events

+

Отлично

opacity:0;
pointer-events:none;

это ты для чего создаешь такой бесполезный блок?

По своему опыту могу утверждать, что те случаи достаточно часты, когда разработчик спрашивает о решении какой-то странной задачи, то он пытается решить проблему, которая может быть решена другим, менее костыльным способом. Но он озвучивает не проблему, а вопрос касательно уже выбранного решения)

Не, теперь всё заебато. Не знал просто что можно воспроизвести описанное выше поведение другим образом

<3

19 :D

@determin1st, @rmshell, проверил — забыл сказать, что этот SVG формируется с помощью lottie.js из json-файла. Так что вытащить что-то нереально просто.

Вот так выглядит код работы с таким json-ом
var svg2 = document.getElementById('stage2');
animData2 = {
 wrapper: svg2,
 animType: 'svg',
 loop: false,
 prerender: false,
 autoplay: false,  
 path: 'json/2.json'
}

var animItem2 = bodymovin.loadAnimation(animData2);
animItem2.addEventListener('DOMLoaded', onDOMLoaded2);

Так что надо что-то придумывать — как-то размечать область над этой анимацией, либо что-то еще.

В целом, мой вопрос достаточно общий - как разметить пустое пространство, чтобы по hover что-то показывать над ним.

Обернуть все в div

А hover сделать с помощью :before

position:absolute и z-index: много

Не знал про такое. А можно поподробнее?

Вот часть моей анимации. Считайте, что над зданием надо показать попап с картинкой http://doqas.com/scrollmagic/

ого, нынче жс прогер синоним слова "зумер" 😀

Оборачиваешь свой svg в div например с классом .outerDiv, вот css который тебе нужен:
.outerDiv {position: relative;}
.outerDiv:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%
height: 100%;
z-indez: 2;
cursor: pointer; /* для наглядности *\