CSS setting mouse hover style
Setting Hover Styles with CSS
Hover styles are a crucial element in web design, enhancing user experience and improving page interactivity. CSS makes it easy to set hover styles, allowing users to see different effects when their mouse hovers over an element. This article will detail how to set hover styles with CSS and provide several sample code examples for reference.
1. Changing the Mouse Pointer Style
The cursor style can be changed using the CSS cursor property. Common values include pointer, default, and crosshair. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cursor Example</title>
<style>
.cursor-example {
cursor: pointer;
}
</style>
</head>
<body>
<p class="cursor-example">Hover over this text to see the cursor change</p>
</body>
</html>
Output:
In the example above, when the mouse hovers over the text, the mouse pointer changes to a hand.
2. Changing the Background Color
Use the CSS background-color property to change the background color of an element. This property can be used to change the background color when the mouse hovers over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Color Example</title>
<style>
.bg-color-example {
background-color: #f0f0f0;
transition: background-color 0.5s;
}
.bg-color-example:hover {
background-color: #ffcccc;
}
</style>
</head>
<body>
<div class="bg-color-example">Hover over this div to see the background color change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the background color changes from gray to pink.
3. Changing Text Color
The CSS color property can be used to change the color of text. The text color can be changed when the mouse hovers over it. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Color Example</title>
<style>
.text-color-example {
color: #333;
transition: color 0.5s;
}
.text-color-example:hover {
color: #ff6600;
}
</style>
</head>
<body>
<p class="text-color-example">Hover over this text to see the text color change</p>
</body>
</html>
Output:
In the example above, when the mouse hovers over the text, the text color changes from black to orange.
4. Changing Font Size
The CSS font-size property can be used to change the font size of text. It can be used to change the font size when the mouse hovers over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Size Example</title>
<style>
.font-size-example {
font-size: 16px;
transition: font-size 0.5s;
}
.font-size-example:hover {
font-size: 20px;
}
</style>
</head>
<body>
<p class="font-size-example">Hover over this text to see the font size change</p>
</body>
</html>
Output:
In the example above, when you hover over the text, the font size changes from 16px to 20px.
5. Changing Border Styles
Using the CSS border property, you can change the border style of an element. You can also change the border style when the mouse hovers over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Style Example</title>
<style>
.border-style-example {
border: 1px solid #333;
transition: border 0.5s;
}
.border-style-example:hover {
border: 2px dashed #ff6600;
}
</style>
</head>
<body>
<div class="border-style-example">Hover over this div to see the border style change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the border style changes from solid to dashed and turns orange.
6. Changing Opacity
The CSS opacity property allows you to change the transparency of an element. This property can be used to change the transparency when the mouse is hovering over it. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity Example</title>
<style>
.opacity-example {
opacity: 1;
transition: opacity 0.5s;
}
.opacity-example:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="opacity-example">Hover over this div to see the opacity change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element’s opacity changes from 1 to 0.5.
7. Changing Element Position
Using the CSS transform property, you can change the position of an element when the mouse hovers over it. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform Example</title>
<style>
.transform-example {
transition: transform 0.5s;
}
.transform-example:hover {
transform: translateX(50px);
}
</style>
</head>
<body>
<div class="transform-example">Hover over this div to see the position change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element moves 50px to the right.
8. Resizing Elements
You can also resize elements using the CSS transform property, which allows you to resize elements on hover. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform Scale Example</title>
<style>
.transform-scale-example {
transition: transform 0.5s;
}
.transform-scale-example:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="transform-scale-example">Hover over this div to see the size change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element is magnified 1.2 times.
9. Changing the Element’s Rotation Angle
You can also change the rotation angle of an element using the CSS transform property. This property allows you to change the rotation angle of an element when the mouse hovers over it. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform Rotate Example</title>
<style>
.transform-rotate-example {
transition: transform 0.5s;
}
.transform-rotate-example:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="transform-rotate-example">Hover over this div to see the rotation</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element rotates 45 degrees clockwise.
10. Changing the Tilt of an Element
You can also change the tilt of an element using the CSS transform property. This property can be used to change the tilt of an element when the mouse hovers over it. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform Skew Example</title>
<style>
.transform-skew-example {
transition: transform 0.5s;
}
.transform-skew-example:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="transform-skew-example">Hover over this div to see the skew</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element tilts 20 degrees horizontally and 10 degrees vertically.
11. Changing Element Shadows
Use the CSS box-shadow property to add a shadow effect to an element, which can be changed when the mouse hovers. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Shadow Example</title>
<style>
.box-shadow-example {
box-shadow: 2px 2px 5px #888;
transition: box-shadow 0.5s;
}
.box-shadow-example:hover {
box-shadow: 5px 5px 10px #ff6600;
}
</style>
</head>
<body>
<div class="box-shadow-example">Hover over this div to see the shadow effect </div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the shadow changes from light gray to orange.
12. Changing Element Opacity and Shadow Effects
By combining the CSS opacity and box-shadow properties, you can change both the opacity and shadow effects of an element when the mouse hovers over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity and Box Shadow Example</title>
<style>
.opacity-shadow-example {
opacity: 1;
box-shadow: 2px 2px 5px #888;
transition: opacity 0.5s, box-shadow 0.5s;
}
.opacity-shadow-example:hover {
opacity: 0.5;
box-shadow: 5px 5px 10px #ff6600;
}
</style>
</head>
<body>
<div class="opacity-shadow-example">Hover over this div to see the opacity and shadow effect change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element’s opacity changes to 0.5, and the shadow effect changes from light gray to orange.
13. Changing Element Shape
Using the CSS border-radius property, you can change the shape of an element when the mouse hovers over it. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Radius Example</title>
<style>
.border-radius-example {
border-radius: 50%;
transition: border-radius 0.5s;
}
.border-radius-example:hover {
border-radius: 0;
}
</style>
</head>
<body>
<div class="border-radius-example">Hover over this div to see the shape change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the element’s shape changes from a circle to a square.
14. Changing Element Rotation and Opacity
By combining the CSS transform and opacity properties, you can change both the rotation and opacity of an element when the mouse hovers over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform and Opacity Example</title>
<style>
.transform-opacity-example {
opacity: 1;
transition: transform 0.5s, opacity 0.5s;
}
.transform-opacity-example:hover {
transform: rotate(45deg);
opacity: 0.5;
}
</style>
</head>
<body>
<div class="transform-opacity-example">Hover over this div to see the rotation and opacity </div>
</body>
</html>
Output:
In the above example, when the mouse hovers over the div element, the element rotates 45 degrees clockwise and its opacity becomes 0.5.
15. Changing an Element’s Background Image
Use the CSS background-image property to add a background image to an element, which can be changed when the mouse hovers over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Image Example</title>
<style>
.bg-image-example {
background-image: url('https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/images/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: cover;
transition: background-image 0.5s;
}
.bg-image-example:hover {
background-image: url('https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/images/background.jpg');
}
</style>
</head>
<body>
<div class="bg-image-example">Hover over this div to see the background image </div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the background image changes from the logo to another image.
16. Changing the border color of an element
The CSS border-color property can be used to change the border color of an element. This property can be used to change the border color when the mouse hovers over it. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Color Example</title>
<style>
.border-color-example {
border: 1px solid #333;
transition: border-color 0.5s;
}
.border-color-example:hover {
border-color: #ff6600;
}
</style>
</head>
<body>
<div class="border-color-example">Hover over this div to see the border color change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the div element, the border color changes from black to orange.
17. Changing Element Text Color
Using the CSS color property, you can change the text color of an element. You can also change the text color when the mouse hovers over it. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Color Example</title>
<style>
.text-color-example {
color: #333;
transition: color 0.5s;
}
.text-color-example:hover {
color: #ff6600;
}
</style>
</head>
<body>
<div class="text-color-example">Hover over this text to see the color change</div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the text, the text color changes from black to orange.