problem with custom css

My code:

.`bezoek_toonzaal{
background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2018/03/sanotech-website-home-button-contact.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
height: 200px;
width: 300px;
padding-top: 20px;
}

.ontdek_merken{
background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2018/03/sanotech-website-buttons.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
margin-top: 15px;
padding-top: 22px;
height: 80px;
width: 300px;
}

.toonzaal_wrap:hover .bezoek_toonzaal h4 span{
color: #005471 !important;
}

.toonzaal_wrap:hover .bezoek_toonzaal p{
color: #bdbec0 !important;
}

.toonzaal_wrap:hover .bezoek_toonzaal span{
color: #bdbec0 !important;
}

.toonzaal_wrap:hover .bezoek_toonzaal a{
color: #bdbec0 !important;
}

.toonzaal_wrap:hover .ontdek_merken span{
color: #005471 !important;
}

.bezoek_toonzaal:hover{
color: #005471 !important;
background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2018/03/sanotech-website-home-button-contact-wit.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
height: 200px;
width: 300px;
padding-top: 20px;
}

.bezoek_toonzaal h4 span:hover{
color: #005471 !important;
}

.ontdek_merken:hover{
background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2018/03/sanotech-website-projecten-achtergrond-grote-balk-projecten-wit.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
margin-top: 15px;
padding-top: 22px;
height: 80px;
width: 300px;
color: #005471 !important;
}`

The titels, marked in red, should stay the same color (white) if the other element is being hovered.
Don’t know how to do that in this scenario.