CSS :hover pseudo-class – Restyle on mouse over
The :hover
pseudo-class lets you change the style when the mouse is hovering over the element.
Example
<style>
.btn {
...
}
.btn.gray {
...
}
.btn:hover {
background-color: #3cb0fd;
cursor: pointer;
}
.btn.gray:hover {
background-color: #8c8c8c;
}
</style>
<input type="button" class="btn" value="Button 1">
<input type="button" class="btn gray" value="Button 2">
Result
- Try moving your mouse over each of the buttons to see the new effect.
- .btn:hover selector (Line 10)
- Create a new style rule that allows us to style the btn class differently when the mouse is hovering over it. All you do is add ":hover" to the end of what you want to style.
- cursor property (Line 12)
- Change the mouse cursor to the pointer icon, which makes the button appear clickable (like a regular link).
- :hover is called a pseudo class
- There are also other pseudo classes, such as
:visited
, which allows you to change the color of visited links.
Table of Contents
- Project 1 – Let's style some buttons
- The HTML <style> tag and class attribute
- Margin – Adding space outside an element
- Padding – Adding space inside an element
- Colors – Text and background colors
- Fonts – Changing how text looks
- Borders
- :hover – Restyle on mouse over
- Project 1 – Complete HTML and CSS code
- External stylesheets – Giving CSS its own file
- The HTML <div> and <span> tags
- CSS Selectors
- Project 2 – Styling our website header
- Display – inline, block, inline-block
- Project 2a: Horizontal menu links
- Sizing – width, height, line-height
- Project 2b: Centering the menu links
- Text-decoration – Underline, overline, ...
- Project 2c: Removing underline on links
- Float & clear – Move to left or right
- Project 2d: Move 2nd menu to the right
- Project 2 – Complete HTML and CSS code
- CSS Practice Problems
- JavaScript Tutorial - Make your pages interactive