Adjust the order of CSS types to change the link rollover effect _css/html

You may have realized that you can create CSS rollover effects by specifying different styles for each key, including regular link links (normal), access, rollover, and activation. And, you might also know that the order of CSS types can make an effect difference, and that the style of the CSS code's post order will replace the previous order of the same elements. It is important to establish the type Order of tumbling effects.
Now let's see how the types of link states support the normal rollover effect without conflict, and how to rearrange the order of these types to get different tumbling effects.

Link status

A typical CSS rollover effect relies on the independent type of one of the four states in a hyperlink. You can create a (hyperlink) type that comes with a CSS pre-class to specify the link state:

a:link--General, non-access hyperlinks

a:visited--Accessing hyperlinks

a:hover--the link when a visitor operates the mouse

a:active--Click link

In order for a typical CSS rollover effect to work properly, the order of CSS types in CSS code is important, whether it is an external type table or a type rule embedded in the HIML page title bar.

The A:link type occurs as early as possible because it applies to all links. a:visited type Second, it will replace any linked a:link format. (If the A:link type is followed by a a:visited,a:link, the a:visited type may be substituted.) The second is the a:hover type, which is only used to access the links under the mouse. The last is a:active, so when the link is clicked, it can replace all other types.

a:link {

Color: #0000FF;

Text-decoration:underline;

Font-weight:normal;

Font-style:normal;

}

a:visited {

Color: #3399FF;

Text-decoration:underline;

Background-color: #FFFFFF;

Font-weight:normal;

Font-style:italic;

}

a:hover {

Color: #0000FF;

Text-decoration:underline;

Background-color: #FFFF00;

Font-weight:bold;

Font-style:normal;

}

a:active {

Color: #FF0000;

Text-decoration:none;

Background-color: #CCCCCC;

Font-weight:bold;

Font-style:normal;

}

The order of types in CSS code determines how each type supersedes other types, meaning that more types can be applied to specific elements. Normally, the a:hover type is behind the A:link and a:visited types, so the type of the hover state can be applied to general and access links. However, it is not necessary to follow this approach, you can change the type order to achieve different effects.

Suppose you want to use rollover in a non-access link, but don't want to affect other access links, you might think of the code to handle this form change, but all you have to do is reorganize the CSS code.

By removing the rollover effect from the access link, you can easily remove the a:visited type.

Note that the a:visited type contains rules that specify all the same properties as a:hover, otherwise any a:hover type attributes that are not superseded by the a:visited type will continue to reappear when the visitor's mouse passes through an access link.

Source: Web Teaching Network

