Home >Web Front-end >CSS Tutorial >css how to make mouseover change color

css how to make mouseover change color

WBOY
WBOYOriginal
2021-11-10 11:53:3630313browse

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;}".

css how to make mouseover change 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:

css how to make mouseover change color

##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:

css how to make mouseover change color##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: css how to make mouseover change color

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. css how to make mouseover change color

css how to make mouseover change color

6. For all the codes implemented, copy the code directly to the html file to see the effect: css how to make mouseover change color

<!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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn