0

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?

Kars
  • 73
  • 6

0 Answers0