Rumah > hujung hadapan web > html tutorial > html悬停时如何改变链接a样式

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

醉折花枝作酒筹
Lepaskan: 2023-01-05 16:11:08
asal
3763 orang telah melayarinya

在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>
Salin selepas log masuk

同时 定义文字的CSS样式(文字为黑色宋体) 代码如下:

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

再定义鼠标经过时文字的颜色 (文字为宋体 红色)代码变为:

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

使背景色变色,在示例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>
Salin selepas log masuk

再定义鼠标经过时变动的颜色(颜色为蓝色) 代码如下:

<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>
Salin selepas log masuk

推荐学习:html视频教程

Atas ialah kandungan terperinci html悬停时如何改变链接a样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan