Change Background of one Div, when hovering over H2 Sibling

[simona6]

I've been trying to make this happen for the past few hours, and failing miserably!

I have a row of four Div columns.

In each one is a DIV in a circular shape, and below that, is a H2 tag, with it's own class.

I have assigned a Class to the row, and tried it with one to the column too, for good measure!

I want to hover over the H2, and make the circular DIV light up a different colour.

<div class="grve-background-wrapper"></div></div><div class="grve-section grve-fullwidth-background grve-bg-none grve-column-has-gap grve-column-gap-40 green-circle-hovers"> <div class="grve-container"> <div class="grve-row grve-bookmark"><div class="wpb_column grve-column grve-column-1-4 grve-tablet-sm-column-1-2 grve-mobile-column-1 green-circles-col"> <div class="grve-column-wrapper vc_custom_1595694920324"><div class="grve-element grve-box-icon grve-align-center grve-medium home-circle-minus grve-with-shape" style=""><a href="#" target="_self" class=""> <div class="grve-wrapper-icon grve-simple grve-circle grve-bg-primary-2"><i class="fas fa-mobile-alt grve-text-white"></i></div> <div class="grve-box-content"> </div></a></div><div class="grve-element grve-text vc_custom_1595697474860"><h2 class="home-icon-minheight" style="text-align: center;"><a href="/website-design">Website Design</a></h2>
<p style="text-align: center;">text here</p>
</div> </div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-sm-column-1-2 grve-mobile-column-1"> <div class="grve-column-wrapper vc_custom_1595693634238"><div class="grve-element grve-box-icon grve-align-center grve-medium home-circle-minus grve-with-shape" style=""><a href="#" target="_self" class=""> <div class="grve-wrapper-icon grve-simple grve-circle grve-bg-primary-2"><i class="fab fa-wordpress grve-text-white"></i></div> <div class="grve-box-content"> </div></a></div><div class="grve-element grve-text vc_custom_1595693720215"><h2 class=" home-icon-minheight" style="text-align: center;"><a href="/wordpress">WordPress Services</a></h2>
<p style="text-align: center;">text here</p>
</div> </div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-sm-column-1-2 grve-mobile-column-1"> <div class="grve-column-wrapper vc_custom_1595693652463"><div class="grve-element grve-box-icon grve-align-center grve-medium home-circle-minus grve-with-shape" style=""><a href="#" target="_self" class=""> <div class="grve-wrapper-icon grve-simple grve-circle grve-bg-primary-2"><i class="fas fa-shopping-basket grve-text-white"></i></div> <div class="grve-box-content"> </div></a></div><div class="grve-element grve-text vc_custom_1595693727850"><h2 class="home-icon-minheight" style="text-align: center;"><a href="/ecommerce">ECommerce Design</a></h2>
<p style="text-align: center;">text here</p>
</div> </div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-sm-column-1-2 grve-mobile-column-1"> <div class="grve-column-wrapper vc_custom_1595693662249"><div class="grve-element grve-box-icon grve-align-center grve-medium home-circle-minus grve-with-shape" style=""><a href="#" target="_self" class=""> <div class="grve-wrapper-icon grve-simple grve-circle grve-bg-primary-2"><i class="fas fa-search grve-text-white"></i></div> <div class="grve-box-content"> </div></a></div><div class="grve-element grve-text vc_custom_1595693735199"><h2 class="home-icon-minheight" style="text-align: center;"><a href="/seo">SEO Services</a></h2>
<p style="text-align: center;">text here</p>
</div> </div></div></div> </div>

This is the CSS to try and get it working.

.green-circles-col h2:hover  .grve-wrapper-icon.grve-simple.grve-circle.grve-bg-primary-2
{
    background: #000000;
}

I won't bother with all the CSS that styles the rest.  It's just hovering over the H2, I want the circular 'grve-wrapper-icon' t change colour from its default 'primary-2'.

I have made that change when you hover over the circle, but not over anything else.

That said, I did manage to make it work when you hover over the DIV, but not the H2..... and that's what's thrown me.

[requinix]

CSS cannot target something that happened earlier in the document. If you have a div + h2 and you want to style the div during h2:hover, that won't work. You either have to use :hover of the parent element, or move the two around so it's h2 + div, or restructure your markup in some other way.