这篇文章主要介绍了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悬停时改变链接a样式的方法”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。