Css 关于选择器的困惑，

好吧，我是一个自学成才的程序员，我经常遇到一些我应该理解的事情，但只是。。出于某种原因，不要这样做。我经常遇到这个问题，我需要这样做，以便我可以悬停在一个元素上访问另一个元素，通常在它下面，或者在其他情况下，我需要它来创建一个漂亮的下拉列表。。诸如此类的事情。因此，我有一位朋友向我解释说，我应该使用~selector构建一些东西，但我不记得如何编写它，甚至不记得它是如何工作的。我看过不同的演示，但从未真正理解过

我所拥有的是：

如果你转到bio部分，我会尽量让它在我悬停在GIF上时，它会显示下面的元素。问题是，无论我如何设置规则集，它对我都不起作用。我无法想象为什么会这样，因为我不知道如何使用这个选择器

我对该部分的理解是：

    .bio1 {
  height:50%;
  width:50%;
  position:absolute;
  background-color:transparent;
  color:#FFFFFF;
  z-index:71;
  top:7%;
  left:0%;
  overflow:hidden;
}


.bio2 {
  height:50%;
  width:50%;
  left:0%;
  top:7%;
  background-color:GREY;
  color:#FFFFFF;
  font-family:MS Gothic;
  font-size:8pt;
  z-index:70;
  position:absolute;
}

.bio1:hover ~ .bio2 {  }

我还没有为最后一个规则集做任何声明，因为老实说，我甚至不知道这是做什么的。我只是想知道是否有人能帮我解决这个问题，也许能向我解释一下它是如何工作的，以便我将来可以使用它？顺便说一句，对于我在上面使用的站点，我不允许使用Java，所以请避免这样做。提前谢谢D

2主要问题：

你在.bio2上设置了一个非常小的字体大小，所以如果你想看到一些东西，你需要增加它 .bio2元素上缺少z索引 所以，当你悬停在.bio1上时，你可以在.bio2上设置一个z索引。因为.bio1的z-index:71，所以需要选择一个更高的值

.bio1:hover ~ .bio2 {  
  z-index : 72;
}

---

Fork:

我敢打赌，没有人再在他们的网站上使用Java了。Java与JavaScript没有任何关系，只是它们共享了JavaScript的一部分name@WhiteRabbit，你试过我的答案了吗？我可以看到文本大小，但当鼠标悬停在GIF上时，它仍然会弹出。我正试图将bio1移到右边，以显示和使用下面将包含内容的bio2，但按照现在的设置方式，bio1在尝试悬停在上面时会发疯。我没有设置bio1:hover或者在.bio1:hover~.bio2规则集中放置任何东西，因为我不知道如何设置它来实现我想要的。但是，一旦我能够直观地看到设置是如何工作的，我最终将能够自己理解它。