pointer-events + opacity on hover css

Question

I'm building a site where a seperate div is on top of another. When you hover over the top div I want it to disapear while you hover over it and you should be able to click it.

I at first thought that

opacity: 0;

and

pointer-evets: none;

would do the trick, however, with only opcaity 0; you can't click though the div, and with the pointer-events: none; it doesn't fade. Anyone got a solution to this?

Answer 1

If a div is on top of another div, it will catch all of the events, even if it's at opacity:0.

You could try visibility:hidden instead, since AFAIR this actually removes a div from the layout.

EDIT: "remove from the layout" was a poor choice of words. The commenters are of course right, it's still there.

Answer 2

You can try like this:

 $(function () { $(".parent").click(function () { alert("I am in Parent"); }); $(".child").click(function (e) { alert("I am in Child"); }); }); 

 * {font-family: 'Segoe UI';} .parent {border: 1px solid #ccc; position: relative; padding: 50px;} .parent .child {border: 1px solid #ccf; padding: 15px; position: absolute; left: 10px; top: 10px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;} .child:hover {opacity: 0;} 

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="parent"> <div class="child"></div> </div> <p>Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.</p> 

Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.

Answer 3

Try opacity: 0.001; .

It visually brings the exact same result than opacity:0; and has helped me short out similar situations where pointer-events: none; didn't work either.