Question

在template中，我需要在菜单上实现叠加图像，但我想完全离开菜单项，而不是部分可用。

现在已实施，只有按钮的上半部分可用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>

是否有可能以某种方式让灰色块可用于光标，在蓝色块的重叠区域？

Answer 1

如果您可以移除higher-box的光标操作，则可以使用.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>

Answer 2

假设没有先前的堆叠上下文，您可以使用伪元素：

<强> HTML

--num-executors

<强> CSS

yarn.scheduler.minimum-allocation-mb

http://codepen.io/anon/pen/KryBBr

是否可以部分覆盖元素，但是光标可以看到它？

2 个答案: