- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display an element on hover with CSS?
To display an element on hover with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <style> body{ margin:20px; padding:20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .hiddenText { display: none; } .hoverDiv:hover + .hiddenText { display: block; color: rgb(71, 0, 65); font-size: 22px; font-weight: bold; } </style> </head> <body> <h1>Display an Element on Hover Example</h1> <div class="hoverDiv" style="font-size: 18px;">Hover over me.</div> <div class="hiddenText">This text is shown by hovering on the above div</div> </body> </html>
Output
The above code produces the following output −
On hovering over the “Hover over me” text −
- Related Articles
- How to zoom/scale an element on hover with CSS?
- Display a blue shadow on image hover with CSS
- How to create an image overlay title on hover with CSS?
- How to add transition on hover with CSS?
- How to create an image overlay zoom effect on hover with CSS?
- How to change tabs on hover with CSS and JavaScript?
- How to create image overlay icon effect on hover with CSS?
- Fade in on Button hover with CSS
- Create a transition effect on hover pagination with CSS
- How to create image overlay hover effect with CSS?
- How to style an hr element with CSS?
- How to create image overlay hover slide effects with CSS?
- Display or over image on :hover in HTML
- How to debug CSS/JavaScript hover issues?
- How to create an Ellipse with crosshair cursor on hover over objects using FabricJS?

Advertisements