html - CSS 悬停在 div 上将显示或隐藏其他 div

Question

我确信这是可能的，但我无法让它工作，我想创建一个带有 4 张幻灯片和下面 4 个按钮的横幅。

第一张幻灯片最初应该显示，直到您将鼠标悬停在“按钮 2”上，它会隐藏幻灯片 1、3 和 4，并显示幻灯片 2 并将该幻灯片保留在那里(鼠标关闭)，直到将另一个按钮悬停在上面，然后它将显示显示相应的幻灯片并隐藏其余部分。

如果可能的话，我想尝试在 HTML/CSS 中完成所有这一切，而不需要 jQuery。

我的代码:

<style type="text/css">
.banners {width:100%; max-width:1004px; height:100%; max-height:546px; overflow: hidden;}
#slide1 {width:100%; height:100%; background:yellow; display:block;}
#slide2 {width:100%; height:100%; background:blue; display:none;}
#slide3 {width:100%; height:100%; background:green; display:none;}
#slide4 {width:100%; height:100%; background:red; display:none;}
#bannerbutton1 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:yellow;}
#bannerbutton2 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:blue;}
#bannerbutton3 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:green;}
#bannerbutton4 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:red;}
</style>


<div class="banners">
    <div id="slide1">
    </div>
    <div id="slide2">
    </div>
    <div id="slide3">
    </div>
    <div id="slide4">
    </div>
</div>

<a id="bannerbutton1" href="">
BANNER 1
</a>
<a id="bannerbutton2" href="">
BANNER 2
</a>
<a id="bannerbutton3" href="">
BANNER 3
</a>
<a id="bannerbutton4" href="">
BANNER 4
</a>

这可能很简单，我可能会遗漏一些东西，但我们将不胜感激。

Answer 1

这些事情必须使用 JavaScript 来完成。仅当要显示/隐藏的元素是您用鼠标悬停的那些元素的子元素时，才可以使用纯 CSS 悬停和隐藏元素。例如:

<div class="hover-to-hide-sub-div">
  <div class="hide-me"></div>
</div>

在 CSS 中:

div.hover-to-hide-sub-div:hover div.hide-me { display: none; }

如果没有给出这个层次结构，则需要 JS。