Languages
[Edit]
EN

CSS - show text on hover

0 points
Created by:
Saim-Mccullough
388

In this article, we would like to show you how to show text on hover using CSS.

1. Create a new style for hidden class (using . selector),

2. set the hidden to be invisible at the start using display: none,

3. for the container (in our case the div element) use the :hover pseudo-class with display: block property inside to show up the hidden text when you hover it.

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
    height: 50px;
    }

    div {
      height: 15px;
      width: 70px;
      padding: 5px;
      color: white;
      border-radius: 5px;
      background: #28a745;
    }

    .hidden {
      position: relative;
      height: 15px;
      width: 100px;
      left: 75px;
      top: 5px;
      background: gray;

      display: none;  /* hide text */
    }

    div:hover .hidden {
      display: block;    /* show text */
    }

  </style>
</head>
<body>
  <div>
    Hover me!
    <div class="hidden">Example text...</div>
  </div>
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join