单击重叠的div

时间:2015-05-18 03:43:31

标签: javascript css

我们只说main,我也有div

div小于maindiv固定在main之上。

每当我将鼠标悬停在div上时,只有display: none;,并且只要我悬停maindiv{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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

是的,您需要在javascript / jquery中注册click事件

<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()
 })