CSS实例:鼠标滑过超级链接文字时改变背景颜色
2024-10-11 00:23:04
先讲简单的:
通过CSS可以设置超链接在不同时刻的颜色:
<style>
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FFFF} /* 已访问的链接 */
a:hover {color: #0000FF} /* 鼠标移动到链接上 */
a:active {color: #00FF00} /* 选定的链接 */
</style>
<ul id="content">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.renren.com">人人网</a></li>
<li><a href="http://www.hao123.com">hao123</a></li>
<li><a href="javascript:;">导航菜单4</a></li>
<li><a href="javascript:;">导航菜单5</a></li>
<li><a href="javascript:;">导航菜单6</a></li>
</ul>
效果就不截图了,自己运行一下吧
下面讲一个稍微复杂一点点的:鼠标滑过超链接文字时修改其背景颜色:
<style>
a:link {color: #FF0000;} /* 未访问的链接 */
a:visited {color: #00FFFF;} /* 已访问的链接 */
a:hover {color: #0000FF;background:#f29901;border-radius:7px;} /* 鼠标移动到链接上 */
a:active {color: #00FF00;} /* 选定的链接 */
</style>
<ul id="content">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.renren.com">人人网</a></li>
<li><a href="http://www.hao123.com">hao123</a></li>
<li><a href="javascript:;">导航菜单4</a></li>
<li><a href="javascript:;">导航菜单5</a></li>
<li><a href="javascript:;">导航菜单6</a></li>
</ul>
background:#f29901; 这个是设置背景颜色。
border-radius:7px; 这个是设置背景颜色块以圆角矩形显示。
还可以设置超链接背景色块的宽度
a {
width:130px;
/*li元素的宽度,也就是相当于定义了一个宽度范围,当鼠标移动到上面的范围的时候就触发a:hover效果*/
display:block;
}
详细的见原文参考。
参考:http://www.warting.com/web/201010/10594.html
最新文章
- agularJs 路由
- django tmeplate 循环基数
- davlik虚拟机内存管理之一——内存分配
- X86平台下嵌入式linux触摸屏解决方案(usb触摸屏控制器+完美校准方案+触摸屏QTE开发环境搭建)
- 4.2 spring-import 标签的解析;
- C++----练习--while求和
- html和html5学习
- hibernate--coreapi--configuration sessionfactory--getcurrentsession--opensession
- Eclipse rap 富客户端开发总结(11) : rcp/rap与spring ibatis集成
- Python学习笔记(十四)
- Mac安装Elasticsearch时提示:No Java runtime present, requesting install.
- 常用linux日志查询命令
- java利用iTextWorker生成pdf
- liunx一键安装禅道
- 13函数式编程&;Stream流
- Java华氏转摄氏
- struts2 file
- 洛咕 P2403 [SDOI2010]所驼门王的宝藏
- 修改android Studio SDK 路径产生的问题(模拟器不能启动了)
- [POJ 2397] Spiderman
热门文章
- html网页标题
- HDOJ-三部曲一(搜索、数学)-1006- Catch That Cow
- ORM和Hibernate的配置方式
- 夜黑风高的夜晚用SQL语句做了一些想做的事&#183;&#183;&#183;&#183;&#183;&#183;&#183;
- EnterpriseLibrary4 自己封装程序集实现log打印
- url重写技术
- DATEADD(Day, DATEDIFF(Day,0,ShippingTime), 0)
- 添加mongodb支持
- Flume NG之Interceptor简介
- iOS学习笔记---C语言第四天