CODEWITHSUNDEEP
javascripthtmlcss
Lakshya Sharma
Lakshya Sharma

Reputation: 67

How to add a pop-up to text highlighting <span> tag which is behind a <textarea> tag

I want to demonstrate a real time text filter model.

I have implemented a real time text highlighter which utilizes updating the text entered in , and copies it to a which is behind the . Text is highlighted by adding tags inside the background .

It follows the styling of the following example: (Real time text and highlight updating excluded to avoid unnecessary confusion as the problem is only related to styling)

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <style>
    * {
      font-family: sans-serif;
      font-size: 10pt;
      font-weight: normal;
    }
    
    .wrapper {
      position: relative;
      width: 400px;
      height: 400px;
      outline: solid 1px #666;
    }
    
    .wrapper>* {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    .highlighter {
      background-color: #fff;
      color: #fff;
    }
    
    .highlight {
      background-color: #9ff;
      color: #9ff;
    }
    
    textarea {
      background-color: transparent;
      border: 0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="highlighter">
      This <span class="highlight">is a</span> demonstration.
    </div>
    <textarea>
This is a demonstration.
</textarea>
  </div>
</body>

</html>

So now I want to add a hovering css over the highlighted text, but I am stuck at this point, because the tags are behind for me to access the :hover css for tag.

I hope the problem is clear, any inputs will be appreciated.

Upvotes: 1

Views: 99

Answers (1)

Abel de Bruijn
Abel de Bruijn

Reputation: 180

Try to use contenteditable. Because in this way you can enter html tag directly in the text field and interact with them. For instance with hover

.wrapper{
  height:10rem;
  width:10rem;
  border:1px solid;
}

.highlight {
  background:aqua;
}

.highlight:hover {
  background:red;
}
<div class="wrapper" contenteditable="true">
       This <span class="highlight">is a</span> demonstration.
</div>

Upvotes: 1

Related Questions