1. Hyperlink pseudo-classes

In browsers, hyperlinks are usually underlined, and their style changes by default, when the mouse clicks, and after the mouse clicks. You can use hyperlink pseudo-classes to define the style of hyperlinks at different times when they are clicked.

Hyperlink pseudo-classes are as follows:

pseudo-classes instructions
a:link Style when not accessed
a:visited Style after access
a:hover Mouse over style
a:active Mouse click activation style

Define four pseudo classes. Must be defined in the order of Link, visited, hover and active, otherwise the browser may not display properly.

Examples are as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: blueviolet;
            }
            a:visited{
                color: aquamarine;
            }
            a:hover{
                color:wheat;
            }
            a:active{
                color:yellowgreen;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">Google it and you'll see</a>
    </body>
</html>
Copy the code

Default style, click after, mouse over, mouse click activated styles are as follows:

In practical application, these four pseudo-classes can not all be used. Generally speaking, the hover pseudo-class is commonly used. For the default state when not clicked, it can be set directly in the A tag, not in the link pseudo-class.

Two, : hover pseudo-class

Hover pseudo-class can not only be used for a tag, but also for many elements, such as div, IMG, etc. It is used to set the style of the mouse over this element, often used in practical development.

Third, the mouse style

Define mouse styles using the CURSOR property. There are two ways to define mouse styles: browser mouse styles and custom mouse styles.

1. Browser mouse style

Commonly used attribute values are as follows:

Attribute values instructions
default Default, arrow
pointer finger
text I shape

In addition, there are wait and zoom mouse styles, which are not described here.

2, custom mouse style

Cursor: cursor:url, property values; The address of the mouse picture is generally. Cur, which can be generated by using PS. The general attribute values are default, pointer, and text, that is, the default mouse style, hand style, and text point style. Examples are as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                height: 100px;
                width: 300px;
                cursor: url(cat.cur),default;
            }
        </style>
    </head>
    <body>
        <div class="div_default">Customize the default mouse style</div>
    </body>
</html>
Copy the code

When you hover over a div, the mouse changes to a custom image: