Problems Displaying Div on :hover

Question

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>

Andrii Kovalchuk · Accepted Answer · 2019-02-24 22:54:54Z

1

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>

answered Feb 24, 2019 at 22:54

Andrii Kovalchuk

1,0573 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arty Over a year ago

My code is working like a charm, thanks for your help!

Andrii Kovalchuk · Accepted Answer · 2019-02-24 22:59:09Z

0

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.

edited Feb 24, 2019 at 22:59

Andrii Kovalchuk

1,0573 gold badges11 silver badges29 bronze badges

answered Feb 24, 2019 at 22:52

A. Meshu

4,1782 gold badges24 silver badges35 bronze badges

Comments

Ulugbek Nuriddinov · Accepted Answer · 2019-02-24 23:00:27Z

0

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();
  }
});

answered Feb 24, 2019 at 23:00

Ulugbek Nuriddinov

1713 silver badges13 bronze badges

1 Comment

arty Over a year ago

That's also a great solution, I'm sure it will be of help to someone!

Andrii Kovalchuk · Accepted Answer · 2019-02-25 02:25:44Z

0

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>

edited Feb 25, 2019 at 2:25

Andrii Kovalchuk

1,0573 gold badges11 silver badges29 bronze badges

answered Feb 24, 2019 at 22:53

Ignacio Martínez

8918 silver badges13 bronze badges

Collectives™ on Stack Overflow

Problems Displaying Div on :hover

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related