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: