[SOLVED] pointer-events + opacity on hover css

pointer-events + opacity on hover css

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?

Solution

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.