Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
CSS :indeterminate Selector
Next article icon

CSS :hover Selector

Last Updated : 08 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The CSS :hover selector is used for creating interactive and responsive designs. It allows you to apply styles to an element when the mouse pointer hovers over it. This effect is commonly used for buttons, links, images, and other UI elements, enabling you to enhance user experience through visual feedback.

We can style the links for unvisited pages using the :link selector, for styling the links to visited pages, use the :visited selector & for styling the active link, use the :active selector. If the :link and :visited selectors are present in the CSS definition then in order to see the effect, we must add :hover selector after it.

Syntax:

element :hover{     // CSS declarations; }

Examples of Hover Effects

Here are some practical examples to illustrate how to add hover effects using CSS.

Example 1: Changing Background Color on Hover

This example demonstrates changing the background color of a button when hovered over.

HTML 
<!DOCTYPE html> <html>  <head>     <style>     h1:hover {         color: white;         background-color: green;     }     </style> </head>  <body>     <h1 align="center"> hover it</h1>  </body>  </html>

Output:

Example 2: Revealing a Hidden Block on Hover

In this example, a hidden block is revealed when the user hovers over a text element.

HTML 
<!DOCTYPE html> <html>  <head>     <style>     ul {         display: none;     }          div {         background: green;         width: 200px;         height: 200px;         padding: 20px;         padding-left: 50px;         font-size: 30px;         color: white;         display: none;     }          h3:hover + div {         display: block;     }     </style> </head>  <body>     <h3 align="center">         Hover to see hidden GeeksforGeeks.     </h3>     <div> GeeksforGeeks </div> </body>  </html>

Output:

Example 3: Changing Font Color on Hover

This example illustrates how to change the font color of an element when it is hovered over.

HTML 
<!DOCTYPE html> <html>  <head>     <style>     h1:hover {         color: red;     }     </style> </head>  <body>     <h1 align="center"> hover it</h1> </body>  </html>

Output:

Example 4: Changing Font Family on Hover

In this example, the font family of the text changes when hovered over.

HTML 
<!DOCTYPE html> <html>  <head>     <style>     h1:hover {         font-family: monospace;     }     </style> </head>  <body>     <h1 align="center"> hover it</h1>  </body>  </html>

Output:

Example 5: Adding Underline on Hover

This example demonstrates how to change the text decoration to underline when hovering over an element.

HTML 
<!DOCTYPE html> <html>  <head>     <style>     h1:hover {         text-decoration: underline;     }     </style> </head>  <body>     <h1 align="center"> hover it</h1>  </body>  </html>

Output:

Supported Browsers:

  • Google Chrome
  • Edge 
  • Firefox
  • Opera
  • Safari


Next Article
CSS :indeterminate Selector

P
PranchalKatiyar
Improve
Article Tags :
  • CSS
  • Web Technologies
  • CSS-Selectors
  • Web technologies

Similar Reads

  • CSS [attribute*=value] Selector
    The [attribute*="str"] selector targets the elements whose attribute values contain a specified substring. This substring can appear anywhere within the attribute's value — beginning, end, or middle. Syntax: element [attribute*="str"] { // CSS Property} Example: In the following example, the <p
    2 min read
  • CSS [attribute=value] Selector
    The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value". Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions. Example 1: In this example, The selector h1[id="geeks"] targ
    2 min read
  • CSS [attribute$=value] Selector
    The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value "value". The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end. Syntax: [attribute$="value"] { // CSS
    2 min read
  • CSS [attribute|=value] Selector
    The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-). Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions. Syntax: [attributeT
    2 min read
  • CSS [attribute~=value] Selector
    The [attribute~="value"] selector is used to select those elements whose attribute value contains a specified word. The "value" must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected. S
    2 min read
  • CSS [attribute^=value] Selector
    The [attribute^=value] selector selects elements whose attribute value begins with a given attribute. Syntax: [attribute^=value] { // CSS Property}Example: In this example, The CSS selector p[class^="for"] targets <p> elements with a class attribute that starts with "for" and applies a green b
    2 min read
  • CSS #id Selector
    The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS. Basic ID SelectorThe ID selector allows you to st
    8 min read
  • CSS * (Universal) Selector
    The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It's commonly used for global resets or universal styling. * { /* styles */}1. Basic Use case of universal selectorThe universal selector applies styles to all e
    4 min read
  • CSS :active Selector
    The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements. Syntax: :active{ //CSS p
    2 min read
  • CSS ::after Selector
    ::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax: ::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : [GFGTABS] HTML <!DOCTYPE html> <html> <head
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences