Home > Article > Web Front-end > css how to make mouseover change color
css how to make mouseover change color
- WBOYOriginal
- 2021-11-10 11:53:3630222browse
In CSS, the hover selector and color attribute can be used to achieve the effect of changing color when the mouse is hovering. The hover selector is used to select the element on which the mouse pointer is floating, and the color attribute is used to set the color when hovering; Syntax ":hover{color:hover color;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to make css change color when the mouse is hovering:
1. Open the html development tool and create an html file, as shown in the figure:
##3. Modify the content of the tag and set the color to blue, as shown in the picture:
##4. Set the style when the mouse slides over the tag and the font changes to red: a:hover{color:red}. As shown in the picture: 
5. Save the html file and open it with a browser. The first thing you see is the blue font. Put the mouse on the text and you will see the blue color. The font changes to red font. 
6. For all the codes implemented, copy the code directly to the html file to see the effect: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停字体变色</title>
<style type="text/css">
a{
color:blue;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="">把鼠标放到我身上</a>
</body>
</html>Note: The hover selector must be used to change the style when the mouse is hovering The hover selector is used to select the element on which the mouse pointer is floating. The hover selector can be used on all elements, not just links. In the CSS definition, hover must be placed after link and visited (if present) for the style to take effect. For more programming related knowledge, please visit: Programming Video
! !The above is the detailed content of css how to make mouseover change color. For more information, please follow other related articles on the PHP Chinese website!