CSS如何实现超链接背景切换_html/css_WEB-ITnose

css如何实现超链接背景切换:

相当数量的网站在导航栏都有如此效果:当鼠标放在导航栏目上,背景图片会发生变化,移开之后又会还原原来的背景图片。下面简单介绍一下如何实现此效果。代码实例如下:

 

 

蚂蚁部落div{  height:28px;  width:300px;  border-bottom:3px solid #E10001;}ul{  list-style:none;  margin:0px;  padding:0px;}ul li{  float:left;  width:87px;  height:28px;  margin-left:2px;  display:inline;}ul li a{  width:87px;  height:28px;  display:block;  font-size:14px;  text-align:center;  line-height:28px;  text-decoration:none;  color:#333;  background:url(mytest/demo/bg1.gif) no-repeat;}ul li a:hover{  background:url(mytest/demo/bg2.gif) no-repeat;}

登录后复制

以上代码实现了我们的要求。实现的过程非常简单:

立即学习“前端免费学习笔记(深入)”;

第一步,将超链接的默认状态下设置一个背景图片。

第二部,在鼠标放到超链接上的时候设置成另一张背景图片。

注意:a元素必需要转换成块级元素,否则无法设置高度和宽度。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0508/938.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4683

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3104265.html

(0)
上一篇 2025年3月29日 08:27:46
下一篇 2025年3月29日 08:27:52

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论