The CSS :hover selector selects an element when you hover over that element with your cursor. For instance, you can use :hover to change the color of a link when you hover over the link.
You may want to transition the styles that apply to an element on your web page when the user hovers over that element.
That’s where the CSS :hover selector comes in. The :hover selector allows you to select elements when you mouse over them. This lets you apply styles when the user hovers over the element.
This tutorial will discuss, with examples, the basics of selectors in CSS, and how to use the CSS :hover selector. By the end of this tutorial, you’ll be an expert at selecting elements to which styles should apply using :hover.
CSS Selectors
In CSS, selectors are used to select the HTML elements to which you want to apply styles on a web page. Selectors allow you to choose elements depending on their id, class, group, or attributes, so that you can apply certain styles to specific elements.
For instance, suppose you want to make all <h1> tags in an HTML document appear with a hot pink background. You could do so using this code:
h1 {
background-color: hotpink;
}In this code, we use the <h1> selector which is used to select all <h1> tags on the web page. Then, enclosed within curly brackets, we specify the style we want to apply to the <h1> tags on the web page.
CSS :hover Selector
The CSS :hover selector selects an element when you hover over the element with your mouse. :hover can be used on any CSS element, but it is commonly used on links. :hover is specified after the name of the element you want to select, such as a:hover for a link.
There are a wide range of scenarios where you may want to use the :hover selector. Here are a few potential use cases for the selector:
- Changing the color of text when the user mouses over a line of text.
- Changing the size of an image when the user mouses over the image.
- Changing the color of a button when the user mouses over the button.
In all these use cases, a specific style is applied when the user hovers over an element with their cursor.
The syntax for the :hover selector is as follows:
selector:hover {
// CSS rules
}Here are the main components of the :hover syntax:
- selector is the range of elements to which the :hover selector will be applied. So, if you wanted the :hover effect to trigger whenever a user hovers over a <h3> element, you would specify h3.
- :hover instructs the browser that the styles in the CSS rule should only be applied when the user is hovering over a certain element. This element is by the selector property.
- CSS rules are the styles that should be applied when the user hovers over the elements defined by the selector. For instance, you could specify the font size for text or the background color of a <div> tag. Or you could specify the border radius of an <input> field.
Let’s walk through a few examples to demonstrate how you as a web developer can use the CSS :hover selector.
:hover CSS Examples
There are a number of ways in which the :hover selector could be used. Below we are going to walk through a few common scenarios where the :hover selector could be useful.
CSS Hover Effect: Change the Color of a Link
The :hover selector allows us to change the color of a link when the user hovers over the link.
Suppose we are designing a link that contains the text Career Karma homepage and sends the user to the Career Karma site. This link is set to appear in the color lightgreen on our web page.
We want the link to change to orange when the user hovers over the link with their cursor. To create this effect, we could use the following code:
<html>
<a href="https://careerkarma.com">Career Karma homepage</a>
<html>
<style>
a {
color: lightgreen;
}
a:hover {
color: orange;
}
<style>Click the 
button in the code editor above to see the output of our HTML/CSS code.
Let’s break down our code.
In our HTML file, we define a link to the Career Karma homepage using an <a> tag. Then, in our CSS code, we define two rules.
The first rule applies to all HTML <a> tags on our web page. Our rule sets the text color of all <a> tags to lightgreen using the color property.
The second rule changes the color of an <a> tag on the web page to orange when the user hovers over the <a> tag. This is achieved using the :hover selector.
So, when the user hovers over the text Career Karma homepage, the color of the link changes to orange.
CSS Hover Effect: Show a Block of Text
The :hover selector could also be used to show a block of text when the user hovers over a line of text.
Suppose we are designing a Frequently Asked Questions page for the Career Karma website. When the user hovers over a question, a block of text should appear with the answer to their question. We could create an example question using this code:
<html>
<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>
<html>
<style>
div {
display: none;
background-color: orange;
padding: 10px;
}
span:hover + div {
display: block;
}
<style>Click the button in the code editor above to see the output of our HTML/CSS code.
We used a <span> tag to create the question “What is Career Karma?” which appears on our web page. Then, we used a <div> tag which contains the answer to the question.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
In our CSS file, we used the following styles for our <div> tag:
- display: none, which makes our <div> tag invisible.
- background-color: orange, which sets the background color of our <div> tag to orange.
- CSS padding: 10px, which creates a 10px gap between the contents of our <div> tag and its borders.
We then defined a rule using the span:hover + div selector. This rule changes the style of the display rule in our <div> tag to block, which makes it appear. So, when the user hovers over our <span> tag (denoted by span:hover), the <div> tag will become visible.
Change an Image: CSS On Hover
Another scenario where the :hover selector could be used is to change an image on a web page. The image will change when a user hovers over the image with their computer cursor.
Suppose we are designing a website for a local coffee shop. When a user hovers over the stock image of a coffee on their About page, a new image should replace the existing image. The new image should be a stock image of a café.
We could use the following code to accomplish an image hover effect:
<html>
<img height="750" width="1250" class="aboutImage" />
<html>
<style>
.aboutImage {
background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80");
}
.aboutImage:hover {
background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}
<style>Click the button in the code editor above to see the output of our HTML/CSS code.
We defined an <img> tag which creates an image which is 750px tall by 1250px wide. The class assigned to the tag is called aboutImage.
In our CSS file, we declared two rules.
The first rule sets the background image to be displayed in the element with the class name .aboutImage. We use a stock photo of a coffee as a background image.
The second rule, .aboutImage:hover, changes the background image of the element with the .aboutImage class that the user is hovering over. The new image that appears is a stock image of a café.
Other Uses of the :Hover Selector
As we discussed earlier, there are a number of scenarios where the :hover selector can be useful. If you are looking for more examples of the :hover selector in action, we recommend viewing these other Career Karma tutorials:
- CSS Transition: A guide on how to create transitions that appear when a user hovers over an element on a web page.
- CSS Navigation Bar: A guide on how to create a navigation bar using CSS.
- CSS Dropdown Menu: A guide on how to create a dropdown menu using CSS.
The hover selector is also used to create button hover effects. These effects change the appearance of a button and trigger a hover animation.
We also have a guide on CSS selectors which you can read to learn more about other selectors.
Conclusion
The CSS :hover selector allows you to select an element when the user hovers over the element with a cursor. Once an element is selected, you can apply a new set of styles. These are visible until the user stops hovering over the element with their cursor.
This tutorial discussed, with examples, the basics of CSS selectors and how to use the :hover selector. Now you’re ready to start using the :hover selector like a CSS expert!
For advice on top CSS learning resources, courses, and books, check out our How to Learn CSS guide.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
