Exit button is visible somehow when it should be hidden

[asasass]

Why is that occurring, and how do I fix that?

It is clickable also.

https://jsfiddle.net/a9qzL6eu/

This is no longer display: none; so now the exit button is appearing.

To fix that, do I add something to the js, the css, or both?

.outer-containerB.hide {
  display: block;
  opacity: 0;
  pointer-events: none;
}

<div class="outer-containerB hide">

    <div class="containerB">
        <div class="video-containerC">
            <button class="exitE exit" type="button" title="ExitE" aria-label="Close"></button>
            <div class="ratio-keeper">

                <div class="wrapB">
                    <div class="video playk"></div>
                </div>

                <div class="curtain-leftE">
                </div>
                <div class="curtain-rightE">
                </div>

            </div>
            <div class="playk"></div>
        </div>

[asasass]

hideContainer(".outer-containerB")

is nowhere in the js, should it be?

As a side,

I should go through these and hide some on page load, right?

Good idea?

.rcontainer.hide{
  display: none;
}

.outer-containerB.hide {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.video-containerC.hide {
  display: none;
}

.video-containerC.hide {
  display: none;
}

.curtain-containerD.hide {
  display: block;
  opacity: 0;
  pointer-events: none;
}


.outer-containerA.hide {
  display: none;
}

.containerPageA.hide {
  display: none;
}

.curtainB.hide{
  display:none;
}

.modalA.hide {
  display: none;
}

.containerA.hide {
  display: none;
}

.video-containerA.hide {
   display: none;
}

[PaulOB]

@asasass

Why is that occurring, and how do I fix that?

The button ExitE has pointer-events:initial applied to it and as you are only hiding it using opacity it is still there to be clicked.

pointer-events on a parent does not automatically change the pointer-events of children. You need to set any clickable children to pointer events:none also.

e.g.

.outer-containerB.hide .exitE{
pointer-events:none;
}

[asasass]

After .exitD is clicked, which should be hidden?

.outer-containerA or .containerPageB?

My logical guess would be <div class="outer-containerA hide">

Am I wrong?

html:

<div class="outer-containerA hide">
  <div class="containerPageA">
    <div class="video-containerB">
      <div class="ratio-keeper ">
        <div class="wrapB">
          <div class="video playa" data-id=""></div>
        </div>
      </div>
      <div class="playa"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playb" data-id=""></div>
        </div>
      </div>
      <div class="playb"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playc" data-id=""></div>
        </div>
      </div>
      <div class="playc"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playd" data-id=""></div>
        </div>
      </div>
      <div class="playd"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playe" data-id=""></div>
        </div>
      </div>
      <div class="playe" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="blog-pager">
      <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>

    </div>

  </div>

  <div class="curtain-containerD hide">
    <div class="slide curtain-leftD">
      <div class="inner">
        <div class="container2"></div>
      </div>
    </div>

    <div class="slide curtain-rightD">
      <div class="inner">
        <div class="container2"></div>
      </div>
    </div>
  </div>

  <div class="containerPageB hide">
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playf" data-id="CHahce95B1g"> </div>
        </div>
      </div>
      <div class="playf"></div>

    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playg" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playg"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playh" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playh"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playi" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playi"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playj" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playj"></div>
    </div>
    <div class="blog-pager ">
      <button class="exitD exit" type="button" title="Exit" aria-label="Close"></button>

    </div>
  </div>
  
  <footer class="my-footer">
    <div class="footer-top">
      <a href=" #" target="_blank">something</a><b></b>
      <a href="#" target="_blank">something</a><b></b>
      <a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a><b></b>

      <a href="#" target="_blank">Feedback</a>
    </div>
    <div class="footer-mid">something</div>
    <div class="footer-base">something</div>
  </footer>
</div>

<div class="outer-containerB hide">

  <div class="containerB">
    <div class="video-containerC">
      <button class="exitE exit" type="button" title="ExitE" aria-label="Close"></button>
      <div class="ratio-keeper">

        <div class="wrapB">
          <div class="video playk"></div>
        </div>

        <div class="curtain-leftE">
        </div>
        <div class="curtain-rightE">
        </div>

      </div>
      <div class="playk"></div>
    </div>

    <div class="rcontainer hide">

    </div>
  </div>
</div>

js

function resetPage() {
        hideContainer(".outer-containerA"); //or .containerPageB
        slideCurtain(".video-containerC");
        showContainer(".outer-containerB");
        removePlayer();
    }

    function exitClickHandler() {
    }
    const exitButton = document.querySelector(".exitD");
    exitButton.addEventListener("click", exitClickHandler);
}());

Why would I hide .containerPageB and leave .outer-containerA visible where contained in it is the footer.

Therefore, I should be hiding .outer-containerA which would also keep hidden .containerPageB.