LAST UPDATED: AUGUST 5, 2021
How to display an element on hover?
Answer: We can display an element on hover using :hover pseudo-class
The CSS :hover is a pseudo-class that triggers the HTML element when the mouse or cursor hovers it. We can use this : hover class and make an HTML element visible only when the cursor points to the element else the element will be invisible.
To display the element on hover, make them invisible by default using display: none property. Then add :hoverdisplay: block to make it visible on hover.
Example: Display text on hover
Here is an example to display text on hover by using the CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.change {
display: none;
}
.container:hover + .change {
display: block;
color: blue;
font-size: 20px;
</style>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="container">Click here to display element.</div>
<div class="change">You can see me only on hover</div>
</body>
</html>
Output
Before hover
on hover
Example: Display an image on hover
In this example, we will display an image on hover using CSS.
Conclusionhover
In this tutorial, we have used :hover pseudo-class to display the element on hover. We can display any element using this class. We have illustrated the use of it with examples.
