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

Html – Making a textarea visible when a <p> is hovered

I want the <div id="Feedback"> to appear when I hover over <p>Would you like to give feedback?</p>. In other words, I want the <textarea> and <p>How can we imporve the page?</p> to have their display set to ‘block’ when I hover over that p element.

Heres what I tried:

<!DOCTYPE html>
<html>
  <head>
    <title>Sign up</title>
    <link href="./account.css" rel="stylesheet">
  </head>
  <body>
    <div id="entire-form">
      <form action="form.html" method="GET">
        <h1><b>Sign up =)</b></h1>
        <div id="Feedback">
                  <p>Would you like to give feedback?</p>
                  <p>How can we imporve the page?</p>
                  <textarea name="improve" id="improve" rows="10" cols="70"></textarea>
        </div>
      </form> 
    </div>
  </body>
</html>

textarea, #Feedback p{
    display: none;
}

#Feedback p:nth-child(1) {
    /*What this does is it looks in the div with the id Feedback and its p elements and selects the first child i.e. the p that comes first*/
    display: block;
    margin: 15px;
}

#Feedback p:nth-child(1):hover{
    display: block;
}
Tags:

2

Answers


  1. 0

    You cannot achieve this without JavaScript. I have made some changes in your code regarding using correct HTML elements and their order to achieve the desired functionality. I also updated your CSS part.

    textarea will stay visible when user will hover the mouse on it or will type something in.

    I hope this will fix your problem. You can make further changes according to your desire.

    document.addEventListener("DOMContentLoaded", function () {
  const hoverLine = document.querySelector(".hover-line");
  const textareaContainer = document.getElementById(
    "feedback-input-container"
  );
  const textarea = document.getElementById("improve");

  function showTextarea() {
    textareaContainer.style.display = "flex";
  }

  function hideTextarea() {
    if (!textarea.value.trim()) {
      textareaContainer.style.display = "none";
    }
  }

  hoverLine.addEventListener("mouseover", showTextarea);
  textareaContainer.addEventListener("mouseover", showTextarea);
  textareaContainer.addEventListener("mouseout", hideTextarea);
  textarea.addEventListener("focus", showTextarea);
  textarea.addEventListener("input", showTextarea);
  textarea.addEventListener("blur", hideTextarea);
});
    .hover-line {
  cursor: pointer;
}

#feedback-input-container {
  display: none;
  flex-direction: column;
  align-items: start;
  gap: 3px;
  margin-top: 5px;
}
    <h1>Sign up =)</h1>

<form action="form.html" method="GET">
  <label class="hover-line">Would you like to give feedback?</label>

  <div id="feedback-input-container">
    <label>How can we improve the page?</label>
    <textarea name="improve" id="improve" rows="10" cols="70"></textarea>

    <button type="submit" name="submit">Submit</button>
  </div>
</form>
    Login or Signup to reply.
  2. 0

    If you want is " Show text area and ‘How can we improve the page?’ when you hover on ‘Would you like to give feedback?’then this will help you also you can achieve that with html and css only.

    I have added class someCss & hiddenContent. Add hiddenContent to div which you want to hide. Most css I have added is basic but this .someCss:hover ~ .hiddenContent{ display:block;} is important as it adds display: block to hiddenContent when you hover on someCss text. I have explained in stort as its simple.

    Below is working example.

    .hiddenContent{
            display: none
        }

        .someCss:hover ~ .hiddenContent{ display:block;}

        .hiddenContent:hover{
            display: block;
        }
    <div id="Feedback">
        <p class="someCss">Would you like to give feedback?</p>
        <p class="hiddenContent">How can we imporve the page?</p>
        <textarea class="hiddenContent" name="improve" id="improve" rows="10" cols="70"></textarea>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search