- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 −
Published on 07-May-2020 11:09:49
- Related Questions & Answers
- 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?
- Fade in on Button hover with CSS
- How to change tabs on hover with CSS and JavaScript?
- How to create image overlay icon effect on 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?
- How to create an Ellipse with text cursor on hover over objects using FabricJS?
- How to create an Ellipse with progress cursor on hover over objects using FabricJS?
- How to create an Ellipse with crosshair cursor on hover over objects using FabricJS?
Advertisements