Skip to content

Courses
Tutorials
Practice
Contests

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

How to Change the Color of Link on Hover using CSS ?

How to Change the Border Color on Hover in CSS ?

Last Updated : 16 Oct, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

Border color in CSS defines the color of an element’s border. You can change the border color on hover using the :hover pseudo-class, allowing you to modify the border’s appearance when a user hovers over the element.

Using CSS hover Pseudo Class

The hover pseudo-class in CSS is a powerful tool that allows you to change the style of an element when a user hovers over it with their mouse. This can enhance interactivity and improve user experience by providing visual feedback.

Example: In this example, we use a CSS pseudo selector to change the border color on mouse hover.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content=         "width=device-width, initial-scale=1.0">     <title>Change Border Color on Hover</title>      <style>         body {             text-align: center;         }          .borderColor {             display: inline-block;             padding: 30px 50px;             border: 5px solid black;         }          .borderColor:hover {             border: 5px solid green;         }     </style> </head>  <body>     <div class="borderColor">         Code World     </div> </body>  </html>

Output:

How to Change the Color of Link on Hover using CSS ?

A

ashokjaiswal

Improve

Article Tags :

Web Technologies
CSS
Geeks Premier League
CSS-Questions
Geeks Premier League 2023

Similar Reads

How to Change the Color of Link on Hover using CSS ?

Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU

How To Change The Cursor On Hovering In CSS?

Changing the cursor style when a user hovers over a particular element is a common user experience enhancement in web development. The default cursor is usually a pointer (arrow) but CSS allows us to change the cursor to various shapes such as a hand (for links), text selection, or even custom icons

How to Change the Item Color of List on Hover ?

In CSS, we can customize the interaction with the list element by changing the color of the list item on hover. We can also apply the different colors to each item using the :hover pseudo class in CSS. Approach: Using the :hover Pseudo-classIn this approach, we are using the :hover pseudo-class in C

How To Change Color Of SVG On Hover?

SVG stands for Scalable Vector Graphics which is an XML form approach to create graphical elements using the code format of XML, that is, Extensive Markup Language. We can use CSS elements to add colors to svg, or change its properties and even add pseudo-class effects to it. In this article, we wil

How to Change Link Color in CSS?

To change the link color in CSS, use the color property with the anchor (<a>) tag, and different pseudo-classes for various states. HTML Links are added by using the anchor tag. It creates the link to navigate to another webpage from the current page. Note: The default HTML links are in blue c

How to change text selection color in the browsers using CSS ?

Most of the browsers by default highlight the selected text in a blue background. This can be changed by using the ::selection pseudo selector in CSS. The ::selectionselector is used for setting the CSS property to the part of the document that is selected by the user (such as clicking and dragging

How to set gradient border color in CSS?

CSS Gradient Color applies two or more colors by smoothly transitioning between the colors. In this article, we will see how to set the Gradient Border Color of an element using CSS. Gradient Border Color enhances the styling of the element. Set the Gradient Border using border-image propertyThe bor

How to Change the Color of Bullets using CSS?

Changing the color of bullets using CSS means styling the bullet points in a list (<ul> or <ol>) to have a different color than the text. This can be done using pseudo-elements or setting the color property on the list item, enhancing design consistency. 1. Adding An Extra MarkupBy addin

How to change the underline color in CSS?

In this article, we are going to learn how to change the underline color in CSS, To change the underline color in CSS, use the text-decoration-color property. Set it to the desired color value. Styling is implemented in HTML text to make it catchy and attractive. The text can be made italic, underli

How to Change Image on hover with CSS ?

To change an image on hover with CSS, use the :hover pseudo-class on the image element and alter its properties, such as background-image or content, to display a different image when hovered over. Here are some common approaches to changing the image on hover: Table of Content Using Background Imag

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

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

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