如何根据用户停留在哪个div之上来设置两个div的可见性？

Question

我有两个div在彼此之上，其中包含图像。我希望当用户在div和id = "features3_HDS_image"上盘旋时，id = "features3_HDS_image"中的div是可见的，当用户在div和id = "FH_Blurb"上盘旋时，带有id = "features3_FH_image"的div是可见的。

如果用户没有在任何一个div上悬停，我希望默认情况下id = "features3_FH_image"是可见的。

正如下面所示，我尝试使用CSS来完成这一任务，但它似乎不起作用。不管怎么说，我可以用CSS来做这个吗？如果不是，如何在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;
}

Answer 1

最后一个选择器不正确。改为使用：

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