CODEWITHSUNDEEP
jqueryhtmlcss
Andrew
Andrew

Reputation: 3989

How can I set the visibility of two divs based on which div a user hovers over?

I have two divs on top of each other which contain images. I want the div with id = "features3_HDS_image" to be visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be visible when a user hovers over the div with id = "FH_Blurb".

If the user isn't hovering over either div I want id = "features3_FH_image" to be visible by default.

I've tried to do this using only CSS as you can see below, but it doesn't seem to be working. Is there anyway I can do this with CSS? If not, how would this be done in js?

HTML: 

<div class="feature" id="FH_Blurb">
    <h4>Fizz+Hummer</h4>
    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
    </p>
</div>

<div class="feature" id="HDS_Blurb">
    <div>
          <h4 class="we_make_games_HDS_text">Human Delivery Service</h4>
          <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
          </p>
    </div>
</div>



<div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_center">
    <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_image" alt="img">
    <img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">              
</div>

CSS:

#features3_FH_image{
    position: absolute;
    z-index: 1;
}

#features3_HDS_image{
    position: absolute;
    z-index: 2;
    visibility: hidden;
}

#HDS_Blurb:hover + #features3_HDS_image {
    visibility: visible;
}

Upvotes: 0

Views: 53

Answers (1)

Natsu
Natsu

Reputation: 2165

The last selector is not correct. Use instead:

#HDS_Blurb:hover + div > #features3_HDS_image,
#FH_Blurb:hover ~ div > #features3_FH_image {
    visibility: visible;
}

Upvotes: 1

Related Questions