CSS mouse hover text color change
CSS Mouse Hover Text Color Change
In web design, mouse hover effect is one of the most common interactive effects. Using CSS styles, we can create an effect where text changes color when the mouse hovers over it. This effect can make a page more vivid and attract the user’s attention. Below, we’ll detail how to use CSS to achieve this effect.
1. Using the :hover pseudo-class to change text color on mouse hover
In CSS, we can use the :hover pseudo-class to create a hover effect. When the mouse hovers over a specific element, we can change the element’s style. Below is a simple example code that changes the text color to red when the mouse hovers over it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Text Color</title>
<style>
.hover-text {
color: black;
}
.hover-text:hover {
color: red;
}
</style>
</head>
<body>
<p class="hover-text">Welcome to geek-docs.com</p>
</body>
</html>
Code Running Result:
In the example code above, we define a paragraph element with the class name .hover-text and an initial text color of black. When you hover over this paragraph element, the text changes color to red.
2. Using the transition property to achieve a smooth transition
In addition to changing text color, we can also use the transition property to achieve a smooth transition. This way, when the mouse hovers over the text, the text color changes smoothly, rather than abruptly. Below is a sample code that implements a smooth transition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Transition</title>
<style>
.smooth-text {
color: black;
transition: color 0.5s;
}
.smooth-text:hover {
color: blue;
}
</style>
</head>
<body>
<p class="smooth-text">Welcome to geek-docs.com</p>
</body>
</html>
Code Running Results:
In the example code above, we define a paragraph element with the class name .smooth-text. The initial text color is black, and the color transition time is set to 0.5 seconds. When the mouse hovers over this paragraph element, the text color smoothly changes to blue.
3. Using CSS Variables to Implement Multiple Color Selections
Sometimes we want text to change to multiple colors when the mouse hovers over it. CSS variables can be used to achieve this. The following example code implements the effect of text changing to different colors when the mouse hovers over it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Colors</title>
<style>
:root {
--primary-color: red;
--secondary-color: blue;
}
.multi-color-text {
color: var(--primary-color);
transition: color 0.5s;
}
.multi-color-text:hover {
color: var(--secondary-color);
}
</style>
</head>
<body>
<p class="multi-color-text">Welcome to geek-docs.com</p>
</body>
</html>
Code Runtime Results:
In the example code above, we define two CSS variables, –primary-color and –secondary-color, to represent the initial color of the text and the color when the mouse hovers over it, respectively. By using the var() function, we can reference these variables in our styles to change the text color.
4. Use Pseudo-Elements for Even Cooler Effects
In addition to changing the color of the text itself, we can also use the pseudo-elements ::before and ::after to achieve even cooler effects. The following is a sample code that implements the effect of a rainbow line appearing under the text when the mouse hovers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Line</title>
<style>
.rainbow-text {
position: relative;
color: black;
}
.rainbow-text:hover::before {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 5px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body> <p class="rainbow-text">Welcome to geek-docs.com</p>
</body>
</html>
Result of running the code:
In the example code above, we define a paragraph element with the class name .rainbow-text. When the mouse hovers over this paragraph element, a rainbow line appears below the text. This effect is achieved using the ::before pseudo-element and a linear gradient.
5. Use CSS Animation for More Vivid Effects
Finally, we can use CSS animations to achieve a more vivid effect. The following is a sample code that implements an animation that changes the text color and has a flashing effect when the mouse hovers over it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<style>
@keyframes blink {
0% {
color: red;
}
50% {
color: blue;
}
100% {
color: red;
}
}
.blinking-text {
animation: blink 1s infinite;
}
</style>
</head>
<body>
<p class="blinking-text">Welcome to geek-docs.com</p>
</body>
</html>
Code Runtime Results:
In the example code above, we defined a keyframe animation called blink to make the text color blink between red and blue. We then applied this animation to a paragraph element with the class name .blinking-text, creating a text color change and blinking effect when the mouse hovers over it.
Through the above example code, we can see how to use CSS to achieve a mouseover text color change effect, and how to create different effects as needed, making the page more vivid and interesting.