html - 在 :hover 上显示 Div 时出现问题

Question

我试图实现当我将鼠标悬停在文本上时显示文本的效果。我看了另一个问题:Using only CSS, show div on hover over <a> ，并尝试了一些解决方案，但它们对我不起作用。这是我的代码:https://codepen.io/anon/pen/PLYGyg .谢谢!

div#thesishereyay {
  margin-top: 50px;
  margin-left: 120px;
  position: absolute;
  opacity: 0;
  background-color: #000000;
}
    	
h4.thesis {
  margin: 10px;
}
    	
li.thesisbutton {
  position: absolute;
  margin-top: 15px;
  margin-left: 112px;
  opacity: 1;
}

.thesisbutton:hover div.thesishereyay {
  opacity: 1;
}

<ul class="nav">
  <li class="thesisbutton">Thesis</li>
</ul>
<div id="thesishereyay">
  <h4 class="thesis">
  Thirst for triumph during the<br>
  Vietnam war in order to prevent<br>
  a U.S. humiliation led to Lyndon<br>
  Johnson lying to the American public<br>
  about the Gulf of Tonkin incident to<br>
  gain support for the Gulf of Tonkin<br>
  resolution, which resulted in the<br>
  continuation of the war and the<br>
  tragedy of more lives being lost<br>
  for a war being fought in fear of what<br>
  might happen if the U.S. was defeated.</h4>
</div>

Answer 1

你可以做这样的事情。

div#thesishereyay {
  margin-top: 50px;
  margin-left: 120px;
  position: absolute;
  opacity: 0;
  background-color: #000000;
}
    	
h4.thesis {
  margin: 10px;
}
    	
li.thesisbutton {
  position: absolute;
  margin-top: 15px;
  margin-left: 112px;
  opacity: 1;
}

.nav:hover ~ #thesishereyay {
  opacity: 1;
}

<div class="main">
  <ul class="nav">
    <li class="thesisbutton">Thesis</li>
  </ul>
  <div id="thesishereyay">
    <h4 class="thesis">
    Thirst for triumph during the<br>
    Vietnam war in order to prevent<br>
    a U.S. humiliation led to Lyndon<br>
    Johnson lying to the American public<br>
    about the Gulf of Tonkin incident to<br>
    gain support for the Gulf of Tonkin<br>
    resolution, which resulted in the<br>
    continuation of the war and the<br>
    tragedy of more lives being lost<br>
    for a war being fought in fear of what<br>
    might happen if the U.S. was defeated.</h4>
  </div>
</div>