요소를 부분적으로 덮을 수는 있지만 커서에 표시 할 수 있습니까?

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>

어떻게 든 중첩 영역에서 회색 블록이 커서 사용할 수 있습니다 떠날 수 있나요 버튼의 상부 사용할 수 있도록 구현 파란색 블록?

: 당신이 higher-box에 대한 커서 작업을 제거 할 수 있습니다

Answer 1

당신은 더 이전 스택 문맥이없는 가정, 당신은 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