/ / Czy jest możliwe częściowe zakrycie elementu, ale pozostawienie go widocznego dla kursora? - html, css, z-index

Czy można częściowo zakryć element, ale pozostawić go widocznym dla kursora? - html, css, z-index

w szablon, Muszę zaimplementować obrazy nakładki w menu, ale chciałbym odejść z elementami menu dostępnymi dla kliki w całości, a nie częściowo.

Teraz została zaimplementowana, aby dostępna była tylko górna część przycisku 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>

Czy jest możliwe, aby zostawić szare bloki dostępne dla kursora, w zachodzącym obszarze niebieskiego bloku?

Odpowiedzi:

1 dla odpowiedzi № 1

Jeśli możesz usunąć akcje kursora dla higher-box możesz to zrobić .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>


0 dla odpowiedzi nr 2

Możesz użyć pseudoelementu, zakładając, że nie ma poprzedniego kontekstu stosowego:

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