Home > Article > Web Front-end > How to use css to change the font color when the mouse moves over it? (Code actual test)

How to use css to change the font color when the mouse moves over it? (Code actual test)

藏色散人Original: 2018-08-09 15:22:2015577browse

When we browse a web page, a discoloration effect will appear when the mouse passes over a certain text. This is the css font discoloration. On the one hand, it is to actively attract the user's attention to click, and on the other hand, it is to prevent the user from clicking on the wrong text. paragraph. In fact, this CSS mouse font color changing effect is very easy to achieve. As long as you have a little knowledge of css, you can operate it.

The main knowledge point is that the mouse hover is written as HOVER in CSS, and the mouse trigger is written as ACTIVE in CSS.

The specific code example for realizing the font color changing effect of css mouse is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css字体变色测试</title>
</head>
<style>
    a {
        color:black}
    a:hover {
        color:red }
    a:active {
        color:blue}
</style>
<body>
<a>
    你过来指我试试！！！
</a>
</body>
</html>

The above code can be directly copied and tested locally.

How to use css to change the font color when the mouse moves over it? (Code actual test)

Note: The color: red after a means that the link text is black, and the color: black of a:hover means that the link text is red after the mouse moves over it, a :active's color:blue; equals to blue when the mouse clicks on the link text.

So I hope this article will be helpful to everyone on how to achieve the font discoloration effect of the CSS mouse!

[Related content recommendations]

Detailed explanation of text font color (CSS color) in CSS

Font color in html and css Relevant summary of settings

Settings of font color and background color

Examples of how CSS implements text color gradient

The above is the detailed content of How to use css to change the font color when the mouse moves over it? (Code actual test). 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

Previous article：How to achieve font enlargement effect in css? (Actual measurement of first character change code)Next article：How to achieve font enlargement effect in css? (Actual measurement of first character change code)

See more

How to use css to change the font color when the mouse moves over it? (Code actual test)

Related articles