html悬停时如何改变链接a样式

146 阅读 0 评论 97 点赞

我是靠谱客的博主复杂世界，这篇文章主要介绍html悬停时如何改变链接a样式，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

HTML中可以用CCS样式来控制鼠标经过超链时变色。可以文字变色也可使层的背景变色。

具体例子：

使文字变色，新建一个ID为abc的DIV 在里在DIV写入文字（任意文字）

同时建立一个空连接代码如下：

复制代码<div id="abc"><a href="#">文字</a></div>1
<div id="abc"><a href="#">文字</a></div>
登录后复制

同时定义文字的CSS样式（文字为黑色宋体）代码如下：

复制代码<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
</style>1
2
3
4
5
6
<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
</style>
登录后复制

再定义鼠标经过时文字的颜色（文字为宋体红色）代码变为：

复制代码<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
</style>1
2
3
4
5
6
7
8
9
10
<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
</style>
登录后复制

使背景色变色，在示例1中的DIV 定义它为高度宽度分别为50px; 背景为灰色

同时a标签也定义高度宽度分别为50px;的块

代码如下：

复制代码<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
登录后复制

再定义鼠标经过时变动的颜色（颜色为蓝色）代码如下：

复制代码<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
登录后复制