Допустим, у основного контейнера ( не только элемент ) есть класс с именем container
, просто добавьте это правило. Он будет применять более высокий z-index
ко всему, что вы наводите, а не только к самому элементу, и это должно работать:
.container *:hover {
z-index: 1;
}
Вот пример:
.container {
width: 200px;
counter-reset: box;
}
.row {
display: flex;
}
.box {
flex: 1;
height: 60px;
background-color: salmon;
margin: 0px 2px;
transition: all .5s;
counter-increment: box;
display: flex;
justify-content: center;
align-items: center;
}
.box::after {
content: counter(box);
color: white;
font-size: 1.5em;
}
.box:hover {
transform: scale(1.5);
background-color: steelblue;
}
.container *:hover {
z-index: 1;
}
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<hr>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<hr>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>