Question

好的，所以我是一个自学成才的编码员，我常常遇到一些我应该理解的事情，但只是......出于某种原因，不要这样做。我一直在努力解决这个问题，因为我可以将其悬停在一个元素上，通常在其下面访问另一个元素，或者在其他情况下，我需要它来创建一个漂亮的下拉列表。这样的事情。所以我有一个朋友告诉我，我应该使用〜选择器构建一些东西，但我不记得究竟如何编写它甚至它是如何工作的。我查了不同的示威，但从未真正理解过它。

我拥有的是：http://codepen.io/Peechiee/full/vEZmMY/

如果你去生物部分，我试图制作它，这样当我将鼠标悬停在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

Answer 1

2个主要问题：

您在font-size上设置了一个非常小的.bio2，因此如果您想看到某些内容，则需要增加它{/ li>
.bio2元素

因此，当您悬停.bio1时，您只需在.bio2上设置z-index即可。由于.bio1有z-index: 71，您需要选择更高的值。

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

福克：http://codepen.io/anon/pen/KwqOPr

关于〜选择器的困惑，

1 个答案: