Проблемы с отображением Div на: hover

Question

Я пытаюсь добиться эффекта отображения текста при наведении на него курсора.Я посмотрел на другой вопрос: Используя только CSS, покажите div при наведении курсора на , и опробовал некоторые решения, но они не работают для меня.Вот мой код: 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

Я знаю, что это не CSS, который вы хотите, но, возможно, поможет кому-то:)

$('#thesishereyay').on('mouseenter mouseleave', function(e) {
  var $block = $('#thesishereyay');

  if(e.type == 'mouseenter') {
    $block.show();
  } else if(e.type == 'mouseleave') {
    $block.hide();
  }
});

Answer 2

Не уверен, что это то, что вы ищете, но посмотрите:

li.hoverbutton {
  position: relative;
}

#hoveron {
  top: 100%;
  left: 0;
  position: absolute;
  display: none;
  background-color: #000000;
}

h4.showonhover {
  padding: 10px;
  color: #ffffff;
}

li.hoverbutton:hover #hoveron {
  display: block; 
}

<ul class="nav">
  <li class="hoverbutton">
    Hover!
    <div id="hoveron">
      <h4 class="showonhover">Text to show</h4>
    </div>
  </li>
</ul>

Answer 3

Вы можете сделать что-то вроде этого.

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>

Answer 4

Это основная разметка:

ul > li > div {display:none;} /* hide div inside li */
ul > li:hover > div {display: block;} /* show div when li hovered */

<ul class="nav">
  <li class="thesisbutton">Thesis
    <div id="thesishereyay">...</div>
  </li>
</ul>

Надеюсь, это поможет.