欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 用控制超链接样式-css超链接
本文将讲解通过或通过css来控制超链接样式。这里主要讲文字类型的超链接，超链接的样式包括通过CSS来控制设置超链接有无下划线、超链接文字颜色等样式。
什么是超链接？
超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
超链接的代码
&a href=&/& target=&_blank& title=&关于的网站&&&/a&
解析如下：
href 后跟被链接地址目标网站地址这里是
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题
CSS可控制超链接样式-css链接样式如下
a:link是超级链接的初始状态
a:hover是把鼠标放上去时悬停的状况
a:active&是鼠标点击时
a:visited是访问过后的情况
一、简单超链接样式案例
1、通常对全站超链接样式化方法
a{color:#333;text-decoration: } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:
a:hover {color:#CC3300;text-decoration:}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:
2、通过链接内设置类控制超链接样式css方法
案例超链接代码&a href=&/& class=&yangshi&&CSS&/a&
对应CSS代码
a.yangshi{color:#333;text-decoration: }
a.yangshi:hover {color:#CC3300;text-decoration:}
通过这样的设置可以控制链接内的css类名为&yangshi&超链接的样式
3、通过对应超链接外的父级的css类的css样式来控制超链接的样式
案例超链接代码&div class=&yangshi&&&a href=&/&&CSS&/a&&/a&
对应CSS代码
.yangshi a{color:#333;text-decoration: }
.yangshi a:hover {color:#CC3300;text-decoration:}
这里值得注意的是a.yangshi与.yangshi a的样式区别
你可能希望了解：,,
这里就是常见的通过div css来对超链接样式设置案例及分析。
以下为详细CSS A超链接锚文本样式教程
css a:link hover active visited伪类样式教程篇
DIVCSS5这里讲解html a超链接标签，a:hover、a:link、a:active、a:visited伪类样式经验教程，通过CSS设置这几种a锚文本的CSS样式。无论控制超链接文本文字各种鼠标事件样式，可以控制超链接对象的变化。
扩展阅读：
二、基础认识
介绍这4个常见伪类作用与解释
设置a对象在未被访问前（未点击过和鼠标未经过）的样式表属性。也就是html a锚文本标签的内容初始样式。
2、a:hover
设置对象在其鼠标悬停时的样式表属性，也就是鼠标刚刚经过a标签并停留在A链接上时样式。
3、a:active
设置A对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。也就是鼠标左键点击html A链接对象与释放鼠标右键之间很短暂的样式效果。
4、a:visited
设置a对象在其链接地址已被访问过时的样式表属性。也就是html a超链接文本被点击访问过后的CSS样式效果。
三、应用用法案例
我们设置一个超链接，对其设置CSS样式，通过CSS A设置其四种样式效果。通过一个简单的对文本设置css a样式情况了解学习CSS a锚文本样式。
1、案例css代码
&.divcss5&a:link{&:#F00}/*&链接默认为红色&*/&.divcss5&a:hover{&color:#000}/*&鼠标悬停黑色&*/&.divcss5&a:active{&color:#03F}/*&鼠标点击与释放时蓝色&*/&.divcss5&a:visited{&color:#F0F}/*&访问过为粉红&*/&/*&divcss5对象内&a超链接设置样式&*/&&
2、案例html代码
&class=&divcss5&&DIVCSS5关于&&href=&/shili/s57.shtml&CSS&a样式案例&&
这里为了排版截图，特地对有的地方进行换行
3、案例软件中截图
CSS A链接样式案例截图
4、浏览器实际各种样式截图
浏览器中各种A样式截图
一般a:active样式效果是瞬间效果观察不了，所以使用时候可以不用设置。同时超链接默认情况下是自动加下划线的，如果要去掉或再增加下划线可以设置 （）。
扩展阅读：
四、常用CSS A应用
为了大家灵活掌握css a锚文本样式设置，我们整理三种使用情况的A超链接样式控制设置案例，分别为：带超链接文字本身颜色样式与访问后颜色样式相同，没有下划线，鼠标悬停时候color变化，并添加下划线；未访问时候带超链接文本文字颜色是一种并且没有下划线，鼠标悬停经过时候是另外一种颜色有下划线，激活或访问（过）后文本颜色为另外一种并有下划线（三种情况三种颜色）；还有一种情况，本身一个图片背景，鼠标经过悬停另外一种背景图片。通过这三种情况案例教程让大家通过对css a锚文本超链接样式控制掌握其知识。
1、带超链接文字本身css color颜色样式与访问后颜色样式相同，没有下划线，鼠标悬停时候文字颜色color变化，并添加下划线
1）、CSS样式代码：
.divcss5&a{&color:#F00;&text-decoration:none}/*&链接默认为红色&*/&.divcss5&a:hover{&color:#000;&text-decoration:underline}/*&鼠标悬停黑色&*/&/*&divcss5对象内&a超链接设置样式&*/&这里可以不用a:link伪类，可以直接对象&++a{}&即可。&
2）、案例html div代码片段：
&class=&divcss5&&DIVCSS5关于&&href=&/shili/s57.shtml&CSS&a样式案例&&
css a样式说明图
浏览器测试结果需要大家动手测试观察，这样利用学习与掌握，DIVCSS5在这里就不给出浏览器测试结果截图了。
2、未访问时候带超链接文本文字颜色是一种并且没有下划线，鼠标悬停经过时候是另外一种颜色有下划线，激活或访问（过）后文本颜色为另外一种并有下划线（三种情况三种颜色）
此实例与我们教程第二大点&二、应用用法案例&相同，大家可以查看根据实例进行实践，此案例提到了样式设置，大家可灵活试着（）或（）应用。
3、本身一个图片背景，鼠标经过悬停另外一种背景图片
此种情况常常用于网站导航条，本身一种CSS背景样式，鼠标经过背景图片又变另外图片。
扩展阅读：
A超链接设置背景图片变化效果图
这个案例我们需要准备2张图片一张是鼠标未经过时候图片，另外一张鼠标经过时候图片。
DIVCSS5提供给大家
A链接案例需要准备素材图片截图
一张为a.gif,另外一张命名hover.gif
(这里&.gif&)
图片打包下载：
具体实践步骤如下：
1）、新建一个文件夹桌面，命名为&divcss5&
新建文件夹截图
2)、打开新建的&divcss5&文件夹，再里新建一个命名为&images&装图片文件夹
新建装图片images文件夹截图
3)、将下载2张图片素材放入&images&文件夹内
图片素材放入images文件夹里
4）、DW新建一个html文件并且命名为index.html，保存于&divcss5&文件夹下
新建html文件夹
5）、CSS代码片段
li,ul{&border:0;&padding:0;&margin:0;&list-style:none}&/*&CSS初始化标签&*/&ul.divcss5-img{&margin-top:10px}&ul.divcss5-img&li{:&::121&:71&:70:14&:bold}&/*&这里为了便于截图所以对样式代码进行，实际中可以&*/&&ul.divcss5-img&li&a{&;&width:100%;&height:100%;&font-size:14&color:#FFF;&text-decoration:&:url(images/a.gif)&no-repeat&0&0}&&/*&默认链接设置颜色为白色，背景图片，，为14px&*/&ul.divcss5-img&li&a:hover{background:url(images/hover.gif)&no-repeat&0&0}&/*&因为宽度大小字体加粗继承a样式，所以我们只设置变化图片即可&*/&
6）、HTML代码片段
&class=&divcss5-img&&&href=&#&公司介绍&&href=&#&服务项目&&href=&#&成功案例&&
CSS A链接的图片背景改变案例截图&Html a超链接样式图片背景变化案例截图
浏览器测试结果需要大家动手测试观察，这样利用学习与掌握，DIVCSS5在这里就不给出浏览器测试结果截图了。
8）、在线样式：
9）、完整CSS A超链接锚文本案例打包下载：
（DIVCSS5整理到百度网盘，大家直接进入点击即可高速放心下载）如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 12:12
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台IE中伪类:hover的使用及BUG - 网页制作 - 蓝色理想
您的位置：　 &
& IE中伪类:hover的使用及BUG
　IE中伪类:hover的使用及BUG
作者：　时间： 　文档类型：原创　来自：
第 1 页 IE中伪类:hover的使用及BUG [1] 第 2 页
:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。
或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：
引用:在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。
当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用CSS2的写法来实现：
XHTML部分：
&ul& &li&鼠标移过来触发我吧！&a href="#" title=""&哈哈，终于被你发现了！&/a&&/li&& &/ul&
* {margin:0; padding:0;} ul {list-style:margin:100}li {height:100 width:100 background:#000; font-size:12 color:# position:} li a {display:} li:hover a{display: text-decoration:width:100 height:100 background:#c00; position: top:50 left:50 color:#}
演示效果：
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&IE中伪类:hover的使用及BUG&/title&
* {margin:0; padding:0;}
ul {list-style:margin:100}
li {height:100 width:100 background:#000; font-size:12 color:# position:}
li a {display:}
li:hover a{display: text-decoration:width:100 height:100 background:#c00; position: top:50 left:50 color:#}
&li&鼠标移过来触发我吧！&a href="#" title=""&哈哈，终于被你发现了！&/a&&/li&
&/html& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。
下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：
XHTML部分：
&ul& &li&&a href="#" title=""&鼠标移过来触发我吧！&span&哈哈，终于被你发现&/span&&/a&&/li&& &/ul&
CSS中我们将a的设置成块级元素，并使a的大小和宽度和li的相同，并设置a为相对位置，用a来模拟上例中的li；而用span来模拟上例中的a，设置span在默认情况下隐藏（display:），当a被触发时（:hover），则span显示（display:）
* {margin:0; padding:0;} ul {list-style:margin:100}li {height:100 width:100 background:#000; font-size:12 } li a {display: height:100 width:100 position: color:# text-decoration:} li span {display: } li a:hover span {display: width:100 height:100 background:#c00; position: top:50 left:50 color:# }
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&IE中伪类:hover的使用及BUG&/title&
* {margin:0; padding:0;}
ul {list-style:margin:100}
li {height:100 width:100 background:#000; font-size:12 }
li a {display: height:100 width:100 position: color:# text-decoration:}
li span {display: }
li a:hover span {display: width:100 height:100 background:#c00; position: top:50 left:50 color:# }
&li&&a href="#" title=""&鼠标移过来触发我吧！&span&哈哈，终于被你发现&/span&&/a&&/li&
&/html& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
责任编辑：
◎进入论坛、版块参加讨论
页次：1/2页
1个记录/页
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们，我们将立即删除修改。
本文暂时没有评论和评分
说明：输入正确的用户名和密码才能参与评论。如果您不是本站会员，你可以 为本站会员。
注意：文章中的链接、内容等需要修改的错误，请用，以利文档及时修改。
注意：请不要在评论中含与内容无关的广告链接，违者封ID
请您注意：?不良评论请用，以利管理员及时删除。?尊重网上道德，遵守中华人民共和国的各项有关法律法规?承担一切因您的行为而直接或间接导致的民事或刑事法律责任?本站评论管理人员有权保留或删除其管辖评论中的任意内容
?您在本站发表的作品，本站有权在网站内转载或引用 ?参与本评论即表明您已经阅读并接受上述条款
专业书推荐
&1999-. 版权所有xcf007 的BLOG
用户名：xcf007
文章数：391
评论数：249
访问量：617614
注册日期：
[匿名]51cto游客：
[匿名]maben1008：
51CTO推荐博文
css3中，:hover不仅仅可以用在a元素，已经扩展到绝大多数的标签，然而ie6以下浏览器不支持这种特性，今天看下如何做到兼容：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"&&&&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/ charset=gbk" /& &title&例子a以为的元素使用CSS3中的:hover伪类&/title& &style type="text/css"& ul { &&margin:0; &&padding:0; &&list-style-type: } #ulist { &&font-size:14 &&line-height:1.5 &&border-top:3px solid #119DBB; &&width:15 &&margin:0 } #ulist li { &&background-color:#C9F1FA; &&cursor: &&padding-left:10 } #ulist li:hover,#ulist .li_hover { &&background-color:#FFF; &&border-top:1px dotted #14ADCD; &&border-bottom:1px dotted #14ADCD; &&_border-top-style: &&_border-bottom-style: } &/style& &!--[if IE 6]&&&&&&script type="text/javascript" src="jquery.js"&&/script& &script type="text/javascript"& $(document).ready(function(){ &&$("#ulist&li").each(function(){ &&&&$(this).mouseover(function(){ &&&&&&$(this).addClass('li_hover'); &&&&}).mouseout(function(){ &&&&&&$(this).removeClass('li_hover'); &&&&}); &&}); }); &/script& &![endif]--& &/head& &body& &&&ul id="ulist"& &&&&&li&这是一段测试用的文本&/li& &&&&&li&这是一段测试用的文本&/li& &&&&&li&这是一段测试用的文本&/li& &&&&&li&这是一段测试用的文本&/li& &&&&&li&这是一段测试用的文本&/li& &&&&&li&这是一段测试用的文本&/li& &&&/ul& &/body& &/html&
对ie6-& 采用js实现。
了这篇文章
类别：┆阅读(0)┆评论(0)
11:06:40 10:30:23 00:02:56a:hover怎么用？
a:hover怎么用？
不是说hover是鼠标放上去的时候，超链接的字会变颜色么？
怎么我的不会？
要怎么应用到超链接上面啊？
给个简单例子就好
不区分大小写匿名
&style type="text/css"&a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}&/style&
注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
注释：在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！
收到....可是新的问题出现了点击之后颜色变成蓝色了....可是，随便左键点击一下.蓝色超链接又没有了....怎么能实现点击那个页面的时候.字体一直是蓝色？直到点解别的超链接才换颜色？
不可能，我估计除非联系到数据库让后台函数自动识别鼠标点的是链接还是其他文本然后决定调用什么样的函数！腾讯里的链接也是这样，你可以去问题库里看看，也做不到点链接之后自变色！
&style type="text/css"&
a:hover{color:#f00;font-weight:}
&a href="#"&xxxxxx&/a&
- - 我刚刚解决这个问题了....能不能在问个.比如说xxxx原来是蓝色的鼠标移上去xxxx变红色.然后点击链接到那个页面后.那个xxxx还是红色的.接着点击bbbb就bbbb变成红色.xxxx变成蓝色，也是用a:hover么？
a的伪类有好几个。hover定义的是鼠标放到链接上的时候
还有像active是鼠标点击链接还没有松开的时候
visited是点击链接以后
你可以按你的需要自己定义
&style type="text/css"&a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}&/style&
加在网的头部就可以了，
&head&&/head&之间
相关知识等待您来回答
网页制作领域专家