Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

Question

Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

Apologies for the ambiguous title, as I am struggling to accurately convey the issue I am encountering. To clarify the problem, I have created a jsFiddle.

In my current layout, all four divs have opacity: 1 and visibility: visible, while divs a and b both have position:absolute with top: 0 and left: 0.

<div class="a">
  <div class="child-a"></div>
</div>
<div class="b">
  <div class="child-b"></div>
</div>

In the provided example, you can change the properties of div b to: opacity: 0 and visibility: hidden (this transition occurs over time). Once changed, only div a and its child child-a are visible. While you can click on div a, clicking on child-a actually triggers child-b.

Despite the parent of child-b being inactive to mouse events and seemingly invisible, the child itself still responds to them. Ideally, I would expect the child to be completely hidden like its parent.

How can I ensure that clicking on the area where child-a is "seen" applies to child-a as well? I want to utilize opacity transitions between showing and hiding the div, which makes using display:none impractical for transitioning purposes.

I included the display:none toggle in the example because it behaves as expected (albeit without any transition effects).

html css

Answer 1

Answer №1

If you want to experiment with the pointer-events property, here is an example code snippet:

.fade-in {
    pointer-events: none;
}
.fade-in.show-me {
    pointer-events: auto;
}
.fade-in .fade-in {
    pointer-events: none;
}
.show-me .show-me {
    pointer-events: auto;
}

Check out this demo:

var x = document.getElementsByClassName("x")[0];
var y = document.getElementsByClassName("y")[0];
var z = document.getElementsByClassName("z")[0];
var p = document.getElementsByClassName("p")[0];
var q = document.getElementsByClassName("q")[0];
var childX = document.getElementsByClassName("child-x")[0];
var childY = document.getElementsByClassName("child-y")[0];

z.onclick = function () {
  if (y.classList.contains("show-me")) {
    y.classList.remove("show-me");
  } else {
    y.classList.add("show-me");
  }
};
p.onclick = function () {
  if (y.classList.contains("hide")) {
    y.classList.remove("hide");
  } else {
    y.classList.add("hide");
  }
};

x.onclick = function () { console.log("x");q.innerHTML = "x<br>"+q.innerHTML; };
y.onclick = function () { console.log("y");q.innerHTML = "y<br>"+q.innerHTML; };
childX.onclick = function (ev) {ev.stopPropagation(); console.log("child-x");q.innerHTML = "child-x<br>"+q.innerHTML; };
childY.onclick = function (ev) {ev.stopPropagation(); console.log("child-y");q.innerHTML = "child-y<br>"+q.innerHTML; };

.x,
.y {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.x:hover,.y:hover {
  box-shadow: 0 0 2px #000;
}
.x {
  background-color: #fee;
}
.y {
  background-color: #eef;
}
.child-x,.child-y {
  float: left;
  width: 80px;
  height: 80px;
  margin: 25px;
  box-shadow: 0 0 2px #000;
  cursor: pointer;
  line-height: 100px;
  text-align: center;
}
.child-x:hover,.child-y:hover {
  box-shadow: 0 0 4px #000;
}
.fade-in {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
  transition-duration: 200ms;
  transition-property: opacity, visibility;
  transition-timing-function: ease;
  pointer-events: none;
}
.fade-in.show-me {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fade-in .fade-in {
  pointer-events: none;
}
.show-me .show-me {
  pointer-events: auto;
}
.z, .p {
  width: 240px;
  height: 40px;
  margin-top: 30px;
  cursor: pointer;
  background-color: #fff;
  margin-left: 160px;
  box-shadow: 0 0 2px #000;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
}
.z:hover, .p:hover {
  box-shadow: 0 0 4px #000; 
}
.hide {
  display: none;
}
.q {
  clear: both;
}

<div class="x fade-in show-me">
  <div class="child-x fade-in show-me">x-child</div>
</div>
<div class="y fade-in show-me">
  <div class="child-y fade-in show-me">y-child</div>
</div>

<div class="z">Toggle y opacity and visibility</div>
<div class="d">Toggle y display</div>
<div class="q"></div>

Answer 2

If you want to experiment with the pointer-events property, here is an example code snippet:

.fade-in {
    pointer-events: none;
}
.fade-in.show-me {
    pointer-events: auto;
}
.fade-in .fade-in {
    pointer-events: none;
}
.show-me .show-me {
    pointer-events: auto;
}

Check out this demo:

var x = document.getElementsByClassName("x")[0];
var y = document.getElementsByClassName("y")[0];
var z = document.getElementsByClassName("z")[0];
var p = document.getElementsByClassName("p")[0];
var q = document.getElementsByClassName("q")[0];
var childX = document.getElementsByClassName("child-x")[0];
var childY = document.getElementsByClassName("child-y")[0];

z.onclick = function () {
  if (y.classList.contains("show-me")) {
    y.classList.remove("show-me");
  } else {
    y.classList.add("show-me");
  }
};
p.onclick = function () {
  if (y.classList.contains("hide")) {
    y.classList.remove("hide");
  } else {
    y.classList.add("hide");
  }
};

x.onclick = function () { console.log("x");q.innerHTML = "x<br>"+q.innerHTML; };
y.onclick = function () { console.log("y");q.innerHTML = "y<br>"+q.innerHTML; };
childX.onclick = function (ev) {ev.stopPropagation(); console.log("child-x");q.innerHTML = "child-x<br>"+q.innerHTML; };
childY.onclick = function (ev) {ev.stopPropagation(); console.log("child-y");q.innerHTML = "child-y<br>"+q.innerHTML; };

.x,
.y {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.x:hover,.y:hover {
  box-shadow: 0 0 2px #000;
}
.x {
  background-color: #fee;
}
.y {
  background-color: #eef;
}
.child-x,.child-y {
  float: left;
  width: 80px;
  height: 80px;
  margin: 25px;
  box-shadow: 0 0 2px #000;
  cursor: pointer;
  line-height: 100px;
  text-align: center;
}
.child-x:hover,.child-y:hover {
  box-shadow: 0 0 4px #000;
}
.fade-in {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
  transition-duration: 200ms;
  transition-property: opacity, visibility;
  transition-timing-function: ease;
  pointer-events: none;
}
.fade-in.show-me {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fade-in .fade-in {
  pointer-events: none;
}
.show-me .show-me {
  pointer-events: auto;
}
.z, .p {
  width: 240px;
  height: 40px;
  margin-top: 30px;
  cursor: pointer;
  background-color: #fff;
  margin-left: 160px;
  box-shadow: 0 0 2px #000;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
}
.z:hover, .p:hover {
  box-shadow: 0 0 4px #000; 
}
.hide {
  display: none;
}
.q {
  clear: both;
}

<div class="x fade-in show-me">
  <div class="child-x fade-in show-me">x-child</div>
</div>
<div class="y fade-in show-me">
  <div class="child-y fade-in show-me">y-child</div>
</div>

<div class="z">Toggle y opacity and visibility</div>
<div class="d">Toggle y display</div>
<div class="q"></div>

Answer 3

Answer №2

Implementing this with pure CSS alone may be challenging, but you can utilize JavaScript to achieve the desired outcome.

The difference between visibility: hidden and display: none is that the former hides the container while keeping the element on the page, allowing clicks to be handled by underlying elements. In contrast, the latter completely removes the element from the page.

To implement this functionality, hide the element as you are currently doing and then incorporate a setTimeout function to set the display of the parent container to none after a delay matching the transition period.

Below is the code snippet for reference:

// JavaScript code
var a = document.getElementsByClassName("a")[0];
var b = document.getElementsByClassName("b")[0];
var c = document.getElementsByClassName("c")[0];
var d = document.getElementsByClassName("d")[0];
var e = document.getElementsByClassName("e")[0];
var childA = document.getElementsByClassName("child-a")[0];
var childB = document.getElementsByClassName("child-b")[0];

c.onclick = function() {
  if (b.classList.contains("show-me")) {
    b.classList.remove("show-me");

    // Set timeout to match transition duration (200ms)
    setTimeout(function() {
      b.style.display = "none";
    }, 200);

  } else {
    b.style.display = "block";
    b.classList.add("show-me");
  }
};
d.onclick = function() {
  if (b.classList.contains("hide")) {
    b.classList.remove("hide");
  } else {
    b.classList.add("hide");
  }
};

// Additional event handling functions
a.onclick = function() {
  console.log("a");
  e.innerHTML = "a<br>" + e.innerHTML;
};
b.onclick = function() {
  console.log("b");
  e.innerHTML = "b<br>" + e.innerHTML;
};
childA.onclick = function(ev) {
  ev.stopPropagation();
  console.log("child-a");
  e.innerHTML = "child-a<br>" + e.innerHTML;
};
childB.onclick = function(ev) {
  ev.stopPropagation();
  console.log("child-b");
  e.innerHTML = "child-b<br>" + e.innerHTML;
};

.a,
.b {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.a:hover,
.b:hover {
  box-shadow: 0 0 2px #000;
}
/*Additional CSS styles*/
... (omitted for brevity) ...
.hide {
  display: none;
}
.e {
  clear: both;
}

<div class="a fade-in show-me">
  <div class="child-a fade-in show-me">a-child</div>
</div>
<div class="b fade-in show-me">
  <div class="child-b fade-in show-me">b-child</div>
</div>

<div class="c">Toggle b opacity and visibility</div>
<div class="d">Toggle b display</div>
<div class="e"></div>

Answer 4

Implementing this with pure CSS alone may be challenging, but you can utilize JavaScript to achieve the desired outcome.

The difference between visibility: hidden and display: none is that the former hides the container while keeping the element on the page, allowing clicks to be handled by underlying elements. In contrast, the latter completely removes the element from the page.

To implement this functionality, hide the element as you are currently doing and then incorporate a setTimeout function to set the display of the parent container to none after a delay matching the transition period.

Below is the code snippet for reference:

// JavaScript code
var a = document.getElementsByClassName("a")[0];
var b = document.getElementsByClassName("b")[0];
var c = document.getElementsByClassName("c")[0];
var d = document.getElementsByClassName("d")[0];
var e = document.getElementsByClassName("e")[0];
var childA = document.getElementsByClassName("child-a")[0];
var childB = document.getElementsByClassName("child-b")[0];

c.onclick = function() {
  if (b.classList.contains("show-me")) {
    b.classList.remove("show-me");

    // Set timeout to match transition duration (200ms)
    setTimeout(function() {
      b.style.display = "none";
    }, 200);

  } else {
    b.style.display = "block";
    b.classList.add("show-me");
  }
};
d.onclick = function() {
  if (b.classList.contains("hide")) {
    b.classList.remove("hide");
  } else {
    b.classList.add("hide");
  }
};

// Additional event handling functions
a.onclick = function() {
  console.log("a");
  e.innerHTML = "a<br>" + e.innerHTML;
};
b.onclick = function() {
  console.log("b");
  e.innerHTML = "b<br>" + e.innerHTML;
};
childA.onclick = function(ev) {
  ev.stopPropagation();
  console.log("child-a");
  e.innerHTML = "child-a<br>" + e.innerHTML;
};
childB.onclick = function(ev) {
  ev.stopPropagation();
  console.log("child-b");
  e.innerHTML = "child-b<br>" + e.innerHTML;
};

.a,
.b {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.a:hover,
.b:hover {
  box-shadow: 0 0 2px #000;
}
/*Additional CSS styles*/
... (omitted for brevity) ...
.hide {
  display: none;
}
.e {
  clear: both;
}

<div class="a fade-in show-me">
  <div class="child-a fade-in show-me">a-child</div>
</div>
<div class="b fade-in show-me">
  <div class="child-b fade-in show-me">b-child</div>
</div>

<div class="c">Toggle b opacity and visibility</div>
<div class="d">Toggle b display</div>
<div class="e"></div>

Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

Answer №1

Answer №2

Similar questions

Switch from HTML symbol to Java symbol

Utilize jQuery to enclose nested elements within a parent element

Positioning multiple images in CSS

Expand the range of input movement using a unique and oversized custom thumb graphic

Display exclusively the chosen option from the dropdown menu

Incorporating the fadeout technique in conjunction with the append() function

Use CSS to mimic the :hover functionality for touchscreen devices

Display the HTML content retrieved from the SailsJS Controller

What is the best way to ensure the div stays in sync with scrolling?

How to Change the Appearance of Elements in an Array Using React.js

Placing emphasis on an object that appears following a period of waiting

How to fetch an image from a web API using JavaScript

What is the best way to conceal a broken image icon without sacrificing all of the stylesheet?

Transform black and white image to vibrant colors and add various hover effects

Shifting a static-width table within a predetermined width container

Drop down list not showing array values

JavaScript - Modify the proposed content prior to inserting it into the input field

Exploring the attributes of div elements with XPath

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

Iterating through the Bootstrap grid