CODEWITHSUNDEEP
htmlcss
arty
arty

Reputation: 21

Problems Displaying Div on :hover

I'm trying to achieve the effect of having text show when I hover over it. I looked at another question: Using only CSS, show div on hover over <a> , and tried out some of the solutions, but they are not working for me. Here is my code: https://codepen.io/anon/pen/PLYGyg. Thanks!

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>

Upvotes: 0

Views: 70

Answers (4)

Ignacio Mart&#237;nez
Ignacio Mart&#237;nez

Reputation: 891

Not sure if this is what you're looking for but take a look:

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>

Upvotes: 0

Ulugbek Nuriddinov
Ulugbek Nuriddinov

Reputation: 171

I know this is not css which you want, but maybe will help to somebody :)

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

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

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

This the basic markup:

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>

Hope that helps.

Upvotes: 0

Andrii Kovalchuk
Andrii Kovalchuk

Reputation: 1047

You can make something like this.

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>

Upvotes: 1

Related Questions