Is it possible to partly cover the element, but leave it visible to the cursor?

Question

In the template, I need to implement overlay images on the menu, but I would like to leave with the menu items available to a clique completely, not partially.

Now it implemented so that only the upper part of button is available https://arthurmiko.github.io/shadows_portfolio/

.elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #777;
  transition: .3s;
}

.elem:hover {
  cursor: pointer;
  background: #f77;
}

.higher-box {
  position: relative;
  margin-top: -50px;
  width: 308px;
  height: 100px;
  background: rgba(0, 0, 255, .9);
  z-index: 1;
}

<div class="lower-box">
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
</div>
<div class="higher-box"></div>

Is it possible to somehow leave the gray blocks are available for the cursor, in the overlapping area of blue block?

Answer 1

If you can remove the cursor actions for higher-box you can do it with .higher-box { pointer-events: none }

.elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #777;
  transition: .3s;
}

.elem:hover {
  cursor: pointer;
  background: #f77;
}

.higher-box {
  position: relative;
  margin-top: -50px;
  width: 308px;
  height: 100px;
  background: rgba(0, 0, 255, .9);
  z-index: 1;
  pointer-events: none;
}

<div class="lower-box">
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
</div>
<div class="higher-box"></div>