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

Adjusting the Size and Spacing of Vuetify's Buttons

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Is Ursina the right choice for web development?

Instructions on implementing getJSON in this code

Execute MySQL query when the content of an HTML text field changes

change visibility:hidden to visible in a css class using JavaScript

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Tips for Changing Background Color Beyond Body Tag

What is the best way to preload all videos on my website and across different pages?

Determining in Angular 8 whether a value has been altered by a user or by a method call

The absolute CSS dropdown isn't visible, but the relative one is displaying properly

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

The process of masking a video with alpha data from another video on canvas seems to be experiencing a

"Triggering CSS changes with the click of a

Adjust the dimensions of the canvas without disrupting the existing artwork

Creating a custom dynamic favicon and title in NextJS

What strategies can be implemented to enhance the performance of this jQuery slider?

The dropdown menu is being truncated

When the onLeave event of fullPage.js is activated

Challenges associated with Bootstrap toggle switch