javascript - 点击重叠的 div

Question

假设我有main，还有一个div。

div小于main，div固定在main之上。

每当我将鼠标悬停在 div 上时，它就是 display: none;，每当我将鼠标悬停在 main 上时:div{display: none ;。如果我点击 div，我将点击 main。

所以如果main.onclick执行myFunction()，我点击div，它仍然会执行myFunction() 。

我究竟该如何做到这一点？应该是用js吧？

示例代码:

body {
	margin: 0;
}

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

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

#div:hover {
	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.
 }

在 js 中让你的 div 在悬停时不可见:

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