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:
##2. Find the tag on the html page, enter the content in the tag, and then use the tag to cover the content. As shown in the picture:##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>
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!