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

在htML中，可以使用“:hover”伪类选择器改变标签a悬停时的样式，只需要给a元素设置“a:hover{ 属性:属性值} ”即可。“:hover”选择器用于选择鼠标指针浮动在上面的元素，然后给该元素添加相应样式。

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

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

具体例子：

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

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

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

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

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中的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>
    

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

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>
    

推荐学习：html视频教程

以上就是html悬停时如何改变链接a样式的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！