EN VI

Html - Triggering a panel overlay when hovering when the panel overlay has pointer-events:none applied?

In the inlined demo when hovering over the div with the PanelOverlay class on it, it should trigger the PanelOverlay:hover rule, however the PanelOverlay class has pointer-events:none specified in it and this causes the hover not to trigger and so the square does not turn black.

The idea is to indicate that the user is hovering over the item by using a color like rgba(255,255,255, 0.3), however the panel should still allow click through events. In other words it should behave like a button that is highlighted when hovered.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
}

main {
  position: relative;
  display: flex;
  width: 64px;
}
.IconContainer {
  background-color: white;
  color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
}

.IconContainer.OnActive:hover span {
  color: black;
  transition: 1s;
}

.PanelOverlay {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.3);
}

.PanelOverlay:hover {
  z-index: 20000;
  background-color: black;
  transition: 1s;
}

    <main style="position: relative; display: flex; width: 64px">
      <div class="IconContainer OnActive">
        <span class="material-icons-outlined">home</span>
      </div>
      <div class="PanelOverlay"></div>
    </main>

This is a Stackblitz containing the same demo. https://stackblitz.com/edit/stackblitz-starters-dtxtv2?file=styles.css,index.html

Any ideas on how to achieve this?

Solution:

You can use the ::before pseudo element and trigger it on hover as shown below.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
}

main {
  display: flex;
  width: 64px;
}

.IconContainer {
  position: relative;
  background-color: white;
  color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  transition: 1s;
}

.IconContainer::before {
  pointer-events: none;
  content: '';
  display: block;
  transition: 1s;
  z-index: 1000;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.3);
}

.IconContainer.OnActive:hover {
  color: black;
}

.IconContainer.OnActive:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}

<main>
  <div class="IconContainer OnActive">
    <span class="material-icons-outlined">home</span>
  </div>
  <div class="PanelOverlay"></div>
</main>