при наведении на блок фоном закрывает текст, как сделать так чтобы он был над текстом и менял цвет?
<div class="tab">
<div class="info-tab">Компания</div>
<div class="info-tab">Задачи и проекты</div>
<div class="info-tab">CRM</div>
<div class="info-tab">Контакт-центр</div>
<div class="info-tab">Сайты и Магазины</div>
</div>
.menu-slider{
background: #DCE6FF;
border-radius: 50px;
.menu-slider__inner{
display: flex;
.menu-slider__title-box{
padding-top: 86px;
margin-bottom: 152px;
.menu-slider__title{
font-weight: 800;
font-size: 43px;
max-width: 721px;
margin-bottom: 161px;
.menu-slider__title-span{
font-weight: 800;
font-size: 43px;
color: #4F6FD8;
}
}
.menu-slider__logo-bg{
}
}
.tab{
background: #4F6FD8;
border-radius: 50px;
width: 712px;
position: absolute;
right:0;
padding: 183px 250px 465px 109px;
.info-tab{
font-weight: 800;
font-size: 36px;
letter-spacing: 0.02em;
color: #FFFFFF;
margin-bottom: 65px;
max-width: 500px;
cursor: pointer;
&::after{
transition:0.4s;
background: #DCE6FF;
border-radius: 100px;
display: block;
width: 0%;
height: 77px;
position: absolute;
left: 0;
transform: translate(-40%,-50%);
color: #3D5DC6;
}
&:hover {
&:after {
width: 100%;
}
}
}
}
}
}