CSS实例:鼠标滑过超级链接文字时改变背景颜色
先讲简单的:
通过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
CSS实例:鼠标滑过超级链接文字时改变背景颜色的更多相关文章
- css - bootstrap3下拉菜单点击之后怎么改变背景颜色?
css添加 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .n ...
- css取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 神奇的 CSS,让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...
- Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式
Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式 摘自Unity文档 EditorGUIUtility.AddCursorRect public static void AddCursorRect ...
- CSS控制鼠标滑过时的效果
用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...
- WEB学习-CSS行高、字体,链接的美化以及背景
行高和字号 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的. 单行文本垂直居中 文本在行里面是居中 其中,行高:盒子高; 需要注意的是,这个小技 ...
- Asp.Net中GridView加入鼠标滑过的高亮效果和单击行颜色改变
转载自:http://www.cnblogs.com/fly_dragon/archive/2010/09/03/1817252.html protected void GridView1_RowDa ...
- css 实现鼠标滑过流光效果
来划我啊 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- php大力力 [001节]2015-08-21.php在百度文库的几个基础教程新手上路日记 大力力php 大力同学 2015-08-21 15:28
php大力力 [001节]2015-08-21.php在百度文库的几个基础教程新手上路日记 大力力php 大力同学 2015-08-21 15:28 话说,嗯嗯,就是我自己说,做事认真要用表格,学习技 ...
- PHP使用mysqli操作MySQL数据库
PHP的 mysqli 扩展提供了其先行版本的所有功能,此外,由于 MySQL 已经是一个 具有完整特性的数据库服务器 , 这为PHP 又添加了一些新特性 . 而 mysqli 恰恰也支持了 这些新特 ...
- OD调试篇5--如何应对OD使用中的一些问题
打开小甲鱼给的进行恶搞过的程序,会发现一些问题 发现程序直接暂停,或者加载进来有问题. 那机智的我 通过对上一个没有恶搞过的exe可执行文件的PE头进行了比较 会发现其中的猫腻 那么我们去正常的修改一 ...
- Android获取图片资源的4种方式
1. 图片放在sdcard中 Bitmap imageBitmap = BitmapFactory.decodeFile(path) (path 是图片的路径,跟目录是/sdcard) 2. 图片在项 ...
- Mac OS环境变量配置(Android Studio之Gradle)
以gradle环境变量配置为例: Android Studio 自带的gradle路径为: /Applications/Android\ Studio.app/Contents/gradle/grad ...
- HDU 5862(离散化+树状数组)
Problem Counting Intersections 题目大意 给定n条水平或竖直的线段,统计所有线段的交点个数. (n<=100000) 解题分析 首先将线段离散化. 然后将所有线段按 ...
- matlab 不要图像界面
参考文献matlab -nodesktop
- X86平台乱序执行简要分析(翻译为主)
多处理器使用松散的内存模型可能会非常混乱,写操作可能会无序,读操作可能会返回不是我们想要的值,为了解决这些问题,我们需要使用内存栅栏(memory fences),或者说内存屏障(memory bar ...
- dede的pagelist标签的listsize数字属性详解(借鉴)
dede的pagelist标签的listsize数字属性详解.见远seo经常用织梦搭建各种网站,有次发现列表页面的分页显示超过div的界限,也就是溢出了或者说是撑破了.后来经过研究发现是pagelis ...
- android webview如何加载asset目录里的页面
在asset里的页面都可以这样获得 file:///android_asset/index.html