can't figure out custom css

.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;
	color: #FFF;
}

.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;
}

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

Current state:

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.
It’s on my Home page, access below.