Есть проблема, не могу найти решения.
Есть блок, у него внутренняя тень. Что бы тень накладывалась на элементы приходиться ставить отрицательный z-index.
.content {
height: 140px;
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
padding: 20px 10px 10px 10px;
box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
backgound-color: yellow;
border: 1px solid black;
width: 300px;
}
.item {
height: 100px;
width: 100px;
background-color: yellow;
display: inline-block;
cursor: pointer;
z-index: -1;
position: relative;
}
.item:hover {
background-color: red;
}
<div class="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Но тогда перестаёт работать hover.
Убираю отрицательный z-index. Тень на падает на элементы внутри блока.
.content {
height: 140px;
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
padding: 20px 10px 10px 10px;
box-shadow: inset 0px 0px 15px 10px rgba(0,0,0,1);
backgound-color: yellow;
border: 1px solid black;
width: 300px;
}
.item{
height: 100px;
width: 100px;
background-color: yellow;
display: inline-block;
cursor: pointer;
}
.item:hover{
background-color: red;
}
<div class="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>