Jump to content
simona6

Change Background of one Div, when hovering over H2 Sibling

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.