My HTML:
<div class="service-row" id="ReadyToGo">
<img src="assets/img/home-row-1.png" alt="">
<div class="service-details">
<div class="service-title">
<h2>Ready to Go</h2>
</div>
<div class="service-subtitle">
<b>100% klaar voor een winters avontuur.</b>
</div>
<div class="service-desc">
<p>Heeft u deze winter een roadtrip of shortski gepland? Ontdek onze all-in ReadyToGo wintercheck, de
handigste inpaktips en de beste reisapps van het moment om optimaal te genieten van uw reis.</p>
</div>
<a href="#">
Meer Info
</a>
</div>
</div>
My CSS:
#ReadyToGo > .service-details > a:hover {
background: yellow;
}
.service-details a {
color: red;
}
.service-details > a:hover > #ReadyToGo {
background: pink;
}
Goal:
If I hover on the a with "Meer Info" I want to change the background of service-row. I have tried multiple "solutions" I found on StackOverflow but for some reason they don't work for me. I also tried changing the indicator to ~ and > but that didn't help either.
Can this even be done with pure CSS?