纯css制作导航菜单鼠标经过变色效果

2周前 (04-17 17:44)阅读24回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4014
  • 级别管理员
  • 主题802
  • 回复2
楼主

css制作的一款导航菜单鼠标经过加亮显示代码,网站常用的css导航菜单效果,自定义鼠标经过显示颜色。

<STYLE type=text/css>
.www_wuming_ren ul{
 list-style:none;
 font-size: 12px;
 text-decoration: none;
 font-weight: normal;
 width: 780px;
 margin-left: 0px;
 margin-bottom: 0px;
}
.www_wuming_ren li{
 float:left;
 width:85px;
 margin-left:1px;
 line-height:30px;
 background-color: #74bec9;
 text-decoration: none;
}
.www_wuming_ren a{display:block;text-align:center;}
.www_wuming_ren a:link{
 color:#000000;
 text-decoration:none;
 background-color: #74bec9;
 background-image: url(arrow_off.gif);
 background-repeat: no-repeat;
 background-position: 5px bottom;
}
.www_wuming_ren a:visited{
 color:#000000;
 text-decoration: none;
 display: inline;
}
.www_wuming_ren a:hover{
 color:#FFF;
 font-weight:normal;
 text-decoration:none;
 display: block;
 background-color: #F00;
 background-image: url(arrow_on.gif);
 background-repeat: no-repeat;
 background-position: 5px bottom;
}
</STYLE>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="www_wuming_ren">
<UL>
<LI><A href="https://www.wuming.ren">武鸣人一号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人二号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人三号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人四号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人五号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人六号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人七号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人八号</A> </LI>
<LI><A href="https://www.wuming.ren">武鸣人九号</A> </LI>
</UL>
</div>


0
0
收藏0
回帖

纯css制作导航菜单鼠标经过变色效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息