[Edit]

CSS - show text on hover

1 contributors

2 contributions

0 discussions

3 points

Created by:

Saim-Mccullough

688

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

Simple steps:

create two elements: div.container and div.text (inside div.container),
set div.text element as invisible by default using display: none property,
add :hover pseudo-class for div.container element defining display: block property on div.text.

Practical example:

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    body {
        height: 50px;
    }
​
    div.container {
        padding: 5px;
        border-radius: 5px;
        background: #28a745;
        width: 70px;
        height: 15px;
        color: white;
    }
​
    .text {
        padding: 5px;
        position: relative;
        left: 75px;
        top: 5px;
        background: #bebebe;
        width: 100px;
        height: 15px;
        color: black;
        display: none;   /* <----- hides text by default */
    }
​
    div.container:hover .text {
        display: block;  /* <----- shows text on hover   */
    }
​
  </style>
</head>
<body>
  <div class="container">
    Hover me!
    <div class="text">Example text...</div>
  </div>
</body>
</html>