How to click through objects that disappear

Question

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 has four small squares(all with different colors), and one black transparent one which covers all four.

So how can you make it so when you "point" at #box_a, you're actually clicking through #box_e. Well, you can use pointer-events: none on #box_e right? But wait a minute I also want #box_e to disappear when my mouse is over #box_e & to click through it!

By now it's probably evident that I cant use pointer-events: none because then I couldn't read when my mice is over the object in question. How would I do this?

Here is my code(This is a minimalist example):

$(function() {
  $("#box_a").click(function() {
    alert("you clicked box_a")
  });
  $("#box_b").click(function() {
    alert("you clicked box_b")
  });
  $("#box_c").click(function() {
    alert("you clicked box_c")
  });
  $("#box_d").click(function() {
    alert("you clicked box_d")
  });
  $("#box_e").click(function() {
    alert("you clicked box_e(this shouldn't happen!)")
  });
});

#box_a, #box_b, #box_c, #box_d {
 height: 100px;
 width: 100px;
 position: relative;
}

#box_a {
 top:0px;
 left:0px;
 background-color: red;
}

#box_b {
 top:-100px;
 left:100px;
 background-color: blue;
}

#box_c {
 top:-100px;
 left:0px;
 background-color: yellow;
}

#box_d {
 top:-200px;
 left:100px;
 background-color: green;
}

#box_e {
 width:200px;
 height:200px;
 top:-400px;
 left:0px;
 background-color: black;
 opacity: .5;
 position: relative;
 pointer-events: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
<div id="box_d"></div>
<div id="box_e"></div>
</body>

Not sure if I understand you correct, but are you looking for: `#box_a:hover, #box_b:hover, #box_c:hover, #box_d:hover{ opacity:0; }` — Nick, Oct 03 '15 at 18:32
I also have trouble parsing your requirements. What are you actually trying to achieve? — D4V1D, Oct 03 '15 at 18:34
No, "How do you click through an object, and make the object you're clicking through disappear(or `alpha:0`)" — Julian Avar, Oct 03 '15 at 19:06

DRD · Answer 1 · 2015-10-03T19:05:47.427

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:

<div class = "wrapper">
    <div id="box_a"></div>
    <div id="box_b"></div>
    <div id="box_c"></div>
    <div id="box_d"></div>
</div>
<p id = "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") + ".");
});

Awesome! best answer! And thank you, I didn't quite think of that — Julian Avar, Oct 03 '15 at 19:08

Shikkediel · Accepted Answer · 2015-10-03T18:45:34.157

1

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.

edited Oct 03 '15 at 18:45

answered Oct 03 '15 at 18:37

Shikkediel

5,195
16
45
77

If you decide to animate the fade, it's a good idea to add a `stop()` to prevent animation queue build up. Something like : `$('#box_e').stop().fadeTo(400,0.5).removeClass('noevents');` @julian avar. – Shikkediel Oct 03 '15 at 20:06

How to click through objects that disappear

2 Answers2

Linked