Html Question posted in
Some basic documentation can be found here.

Html – How do I interact with the previous element in a div?

I’m trying to create a simple HTML script that shows a piece of text aligned to the left, and when hovered it reveals another piece of text. When shown, the text should be centered and directly above the hovered element’s text or if the revealed text is longer than the original text, left aligned. It should also work for any length of text.

I cannot figure out how to make it work when the "answer" is above the "question". I tried not having them in the same "container" and just positioning the answer above using relative and absolute positions, but I couldn’t figure out how to make it align properly with that route. I could only get it to center on with the width of the whole page.

.hide {
  display: block;
  text-align: center;
  opacity: 0;
  font-size: 10px;
}

.myDIV:hover+.hide {
  opacity: 1;
}

.myDIV {
  font-size: 20px;
  text-align: left;
}

.myContainer {
  position: absolute;
  display: inline-block;
}
<div class="myContainer">
  <div class="myDIV">Question</div>
  <div class="hide">Answer</div>
</div>
Tags:

2

Answers


  1. 0

    Something like this. This doesn’t cover all the cases, but it might give you an idea.

    .hide {
    display: block;
    text-align: center;
    opacity:0;
    font-size: 10px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
   white-space: nowrap;
}
    
.myDIV:hover + .hide {
    opacity: 1;
}

.myDIV {
    font-size: 20px;
    text-align: left;
}

.myContainer {
    position: relative;
    display: inline-block;
    padding-top: 10px;
}
    <div class="myContainer">
    <div class="myDIV">Question</div>
    <div class="hide">Answer Answer Answer Answer</div>
</div>
<br/>
<br/>
<div class="myContainer">
    <div class="myDIV">Question</div>
    <div class="hide">Answer</div>
</div>
    Login or Signup to reply.
  2. 0

    Here’s what I came up with, should work with your case. You can also use wrapping.

    .hide {
  display: block;
  text-align: center;
  opacity: 0;
  font-size: 10px;
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
}

.myContainer:hover {
  cursor: pointer;
}

.myContainer:hover .hide {
  opacity: 1;
  top: -0.5em; /* adjust to your preference */
}

.myDIV {
  font-size: 20px;
  text-align: left;
}

.myContainer {
  position: relative;
  display: inline-block;
  width: fit-content;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="myContainer">
      <div class="myDIV">Question</div>
      <div class="hide">Answer</div>
    </div>
    <div class="myContainer">
      <div class="myDIV">Question</div>
      <div class="hide">AnswerAnswerAnswerAnswerAnswer</div>
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search