Нажатие на перекрывающиеся divs

Question

Давайте просто скажем, что у меня есть main, и у меня также есть div.

div меньше main и div закреплен на верхней части main.

Всякий раз, когда я наведите курсор мыши на div это display: none;, и всякий раз, когда я парить main: div{display: none;}. И если я перейду через div, я перейду через main.

Так что если main.onclick выполняет myFunction(), и я нажимаю на div, он все равно будет выполнять myFunction().

Как именно я мог бы это сделать? Вероятно, он использует js?

Пример кода:

body { 
 
\t margin: 0; 
 
} 
 

 
main { 
 
\t z-index: 1; 
 
\t background-color: #000000; 
 
\t width: 100px; 
 
\t height: 100px; 
 
} 
 

 
#div { 
 
\t z-index: 2; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t height: 20px; 
 
\t width: 20px; 
 
\t background-color: rgba(255, 255, 255, .5); 
 
} 
 

 
#div:hover { 
 
\t display: none; 
 
}

<main> 
 
</main> 
 
<div id="div"> 
 
</div>

Answer 1

Да, вы должны зарегистрировать нажмите событие в JavaScript/JQuery

<main > 
</main> 
<div id='div'> 
</div> 

JS:

$('main').click(function() { 
     $('#div').click(); 
}); 

$('#div').click(myFunction); 

function myFunction() { 
     //Do your thing here or you can put anonymous function into click event. 
} 

Чтобы сделать ваш div невидимым при наведении курсора в js:

$('main').hover(function(){ 
    $('#div').hide() 
})