要素を部分的に覆うことはできますが、カーソルには見えますか？

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のカーソルのアクションを削除することができます場合は、あなたがpseudoelementを使用することができます.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

<div class="covered"></div> 
<div class="covering"></div> 

CSS

.covered{ 
    width: 200px; height: 200px; 
    background: red; 
    position: relative; 
} 
.covered:hover{ 
    background-color: green; 
} 

.covering{ 
    width: 200px; height: 200px; 
    background: blue; 
    position: relative; 
    top: -100px; 
} 

.covered:before{ 
    content: ""; 
    display: block; 
    position: absolute; 
    z-index: 300; 
    width: 100%; height: 100%; 
} 

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