How To Click Through Objects That Disappear

This question is a continuation of How to click through objects How do you click through an object, and make the object you're clicking through disappear(or alpha:0) This snippet h

Solution 1:

This is the way I understand the inquiry. You have a box covering the four smaller boxes and you want the big box removed when you hover over it, so that you can click on one of the four boxes "below."

Based on that understanding here's a slightly optimized fiddle: http://jsfiddle.net/163vuwgu/.

HTML:

<divclass = "wrapper"><divid="box_a"></div><divid="box_b"></div><divid="box_c"></div><divid="box_d"></div></div><pid = "status"></p>

CSS:

.wrapper {
    display: table;
    position: relative;
    margin: 0 auto;
}

#status {
    text-align: center;
}

.wrapper > div {
    height: 100px;
    width: 100px;
    float: left;
    background-color: red;
}

.wrapper > div:nth-of-type(2) {
    background-color: blue;
}

.wrapper > div:nth-of-type(3) {
    background-color: yellow;
    clear: left;
}

.wrapper > div:nth-of-type(4) {
    background-color: green;
}

.wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.wrapper:hover:before {
    display: none;
}

JS:

$(".wrapper > div").click(function(e) {
    $("#status").html("You have clicked " + $(this).attr("id") + ".");
});

Solution 2:

You could use mouseenter, mouseleave and then an addClass on the covering div :

Demo

.noevents {
 pointer-events: none;
}

$('#box_e').mouseenter(function() {    
    $(this).fadeTo(0,0).addClass('noevents');
});

$('.box').mouseleave(function() {
    if (e.relatedTarget.className != 'box') $('#box_e').fadeTo(0,0.5).removeClass('noevents');
})

Then remove the class when the mouse is going out of the smaller boxes - and not into another one (which would cause flickering). Only requirement is to give the boxes a common class.