CODEWITHSUNDEEP
javascriptcss
Julian Avar
Julian Avar

Reputation: 476

Clicking on overlapping divs

Let's just say that I have main, and I also have a div.

The div is smaller than main, and div is fixed on top of main.

Whenever I hover over div it is display: none;, and whenever I hover main: div{display: none;}. And if I click over div, I will be clicking over main.

So if main.onclick executes myFunction(), and I click on div, it will still execute myFunction().

How exactly would I be able to do that? It probably uses js right?

Example code:

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>

Upvotes: 0

Views: 75

Answers (1)

Said Kholov
Said Kholov

Reputation: 2486

Yes you need to register click event in 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.
 }

To make your div invisible on hover in js:

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

Upvotes: 1

Related Questions