EN
CSS - show text on hover
3
points
In this article, we would like to show you how to show text on hover using CSS.
Simple steps:
- create two elements:
div.containeranddiv.text(insidediv.container), - set
div.textelement as invisible by default usingdisplay: noneproperty, - add
:hoverpseudo-class fordiv.containerelement definingdisplay: blockproperty ondiv.text.
Practical example:
// ONLINE-RUNNER:browser;
<!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>