How to change link a style when hovering in html

In HTML, you can use the ":hover" pseudo-class selector to change the style of label a when it is hovered. You only need to set "a:hover{attribute:attribute value}" for the a element. The ":hover" selector is used to select the element on which the mouse pointer is floating, and then add the corresponding style to the element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

You can use CCS style in HTML to control the color change when the mouse passes over a hyperlink. You can change the color of the text or the background of the layer.

Specific example:

Change the color of the text, create a new DIV with the ID abc and write text (any text) in the DIV

At the same time, create an empty connection code as follows ：

<div id="abc"><a href="#">文字</a></div>

At the same time define the CSS style of the text (the text is in black Song Dynasty) and the code is as follows:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
</style>

Then define the color of the text when the mouse passes (the text is in red Song font) and the code becomes ：

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
</style>

Change the background color. In example 1, the DIV in Example 1 defines its height and width as 50px; the background is gray

At the same time, the a tag also defines the height and width as 50px. ;'s block

The code is as follows:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>

Then define the color that changes when the mouse passes (the color is blue) The code is as follows:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
    background-color: #0066FF;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>

Recommended learning:html Video tutorial

The above is the detailed content of How to change link a style when hovering in html. For more information, please follow other related articles on the PHP Chinese website!