当前位置:乔越博客 > 编程语言 > HTML > 正文
乔越

作者:乔越

99年大一热爱网络热爱分享!

手机扫码查看

html作业伪类:hover练习 五彩导航栏

题目:

利用伪类:hover 实现以下效果  把鼠标放在按钮a标签上实现替换图片和字体改色的操作

 

演示图

html作业伪类:hover练习 五彩导航栏
html作业伪类:hover练习 五彩导航栏

 

要先利用左浮动 把4张图片进行横排 排好 

然后再利用css  hover伪类进行更换

看代码:

 
<divid="zong">
<divid="an1">
<p><aclass="an11"href="">五彩导航1</a></p>
</div>
<divid="an2">
<p><aclass="an12"href="">五彩导航2</a></p>
</div>
<divid="an3">
<p><aclass="an13"href="">五彩导航3</a></p>
</div>
<divid="an4">
<p><aclass="an14"href="">五彩导航4</a></p>
</div>
</div>
<style type="text/css">
#zong{
/*设置总外大div 长和宽*/
width: 600px;
height: 58px;
}
.an11,.an12,.an13,.an14{
/*同类代码 长宽 左浮动 边距10*/
width: 120px;
height: 58px;
float: left;
margin: 10px;
/*字居中*/
text-align: center;
color: rgb(255, 255, 255);
/*去除a标签的下划线*/
text-decoration:none;
/*设置行高*/
line-height:50px;
}
/*设置每个按钮的图片!*/
.an11{background:url('img/bg1.png') no-repeat;}
.an12{background:url('img/bg2.png') no-repeat;}
.an13{background:url('img/bg3.png') no-repeat;}
.an14{background:url('img/bg4.png') no-repeat;}
/*设置每个按钮的鼠标停放替换的图片 // 设置变化字的颜色*/
.an11:hover{background: url(img/bg5.png) no-repeat;color: rgb(231, 235, 0);}
.an12:hover{background: url(img/bg7.png) no-repeat;color: rgb(0, 162, 255);}
.an13:hover{background: url(img/bg8.png) no-repeat;color: rgb(76, 0, 255);}
.an14:hover{background: url(img/bg6.png) no-repeat;color: rgb(255, 0, 170);}
</style>

html作业伪类:hover练习 五彩导航栏

未经允许不得转载

作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《html作业伪类:hover练习 五彩导航栏》 发布于2019-04-13

分享到:
赞(0) 打赏

评论 抢沙发

7 + 6 =


html作业伪类:hover练习 五彩导航栏

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

乔越博客

专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

了解一下

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册