如何根据用户将鼠标悬停在哪个div上设置两个div的可见性？

Question

我有两个div在彼此的顶部，包含图像。当用户将鼠标悬停在包含div的div上时，我希望显示id = "features3_HDS_image" id = "HDS_Blurb" id = "features3_FH_image"，当用户将鼠标悬停在div上时，id = "FH_Blurb"的div可见与div。

如果用户没有悬停在任何id = "features3_FH_image"上，我希望默认情况下<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执行此操作，如下所示，但它似乎不起作用。无论如何我能用CSS做到这一点吗？如果没有，如何在js中完成？

HTML：

#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;
}

CSS：

.changes

Answer 1

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

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