a:link,a:visited,a:hover,a:active

转自 http://www.cnblogs.com/yangfeng/archive/2009/07/25/1530962.html

调整:添加针对元素

针对链接(a:hover等)

1:解释


link:连接平常的状态

visited:连接被访问过之后

hover:鼠标放到连接上的时候

active:连接被按下的时候
  
  
详细的: 
:hover版本:CSS1/CSS2  兼容性:IE4+ NS4+
语法:
Selector : hover { sRules }
说明:
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。

:active版本:CSS1/CSS2  兼容性:IE4+
语法:
Selector : active { sRules }
说明:
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。

:link版本:CSS1  兼容性:IE4+ NS4+
语法:
Selector : link { sRules }
说明:
设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性(特性)的a对象,此伪类不发生作用。

:visited版本:CSS1  兼容性:IE4+ NS4+
语法:
Selector : visited { sRules }
说明:
设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性(特性)的a对象,此伪类不发生作用。
2:hover和a:visited书写顺序的重要性
今天在用a:hover属性的时候发现一个奇怪的问题,同一个页面里面有些链接的a:hover效果不能正常表现出来。链接的代码是一样,没有使用其它样式固定,搞的我莫名其妙。还以为是某个标签没有关闭,但是页面比较长,检查起来又嫌累,但是想来想去找不到其它原因,索性把浏览器一关,做别的事情去了。
重新打开这个页面的时候,突然发现那个链接的a:hover效果又出来了。我想了一下,点了那个链接,然后回过头再点,果然又没了。连忙检查css文档,发现a:hover属性写在了visited之前,改写到之后,重试,ok!
以前看书的时候注意到css中关于链接表现的书写有提示说各属性顺序不能颠倒,一直没有注意,写的时候通常都很随意。现在看来不能这个顺序还是很重要的。
css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active,即

针对元素

$('元素').hover(function(){},function(){})//function1,鼠标停留在元素上,function2,鼠标离开元素

而针对元素不能用focus

focus用于文本框

### 关于 `a:visited` 样式失效的原因及解决方案 #### 原因分析 1. **安全性和隐私保护** 浏览器出于安全性考虑,限制了开发者对已访问链接样式的控制能力。现代浏览器不允许通过 JavaScript 或 CSS 获取用户的浏览历史记录,这可能导致某些样式无法正常生效[^1]。 2. **伪类顺序错误** 如果未遵循 LVHA-order (`:link`, `:visited`, `:hover`, `:active`) 的定义顺序,可能会导致 `a:visited` 被其他伪类覆盖。例如,如果 `:hover` 定义在 `:visited` 之前,则当鼠标悬停时,`:hover` 样式会优先显示而不是 `:visited` 样式。 3. **特定属性的限制** 浏览器仅允许部分 CSS 属性应用于 `a:visited`,主要包括颜色相关的属性(如 `color`)。尝试修改其他属性(如背景色、边框等)可能不会生效或表现异常。 --- #### 解决方案 ##### 方法一:调整伪类顺序 确保按照正确的顺序定义伪类样式: ```css /* 正确的顺序 */ a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: green; } ``` 上述代码中,`:visited` 放在 `:link` 和 `:hover`/`:active` 中间,以避免被其他状态覆盖。 ##### 方法二:只设置受支持的属性 由于浏览器的安全策略,建议只为 `a:visited` 设置有限的颜色相关属性。以下是一个有效的例子: ```css a:visited { color: darkorchid; /* 受支持的颜色属性 */ } ``` 避免使用不受支持的属性,比如 `background-color` 或 `border-radius`,这些可能会被忽略或引发冲突。 ##### 方法三:测试兼容性 考虑到不同浏览器的行为可能存在差异,在开发过程中应验证目标浏览器的支持情况。可以借助工具(如 Can I Use)确认功能兼容性[^4]。 --- ### 示例代码 以下是完整的 HTML 和 CSS 实现示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Link Styles</title> <style> a:link { color: blue; /* 默认链接颜色 */ } a:visited { color: darkorchid; /* 已访问链接颜色 */ } a:hover { color: red; /* 鼠标悬停时的颜色 */ } a:active { color: green; /* 活动状态下的颜色 */ } </style> </head> <body> <a href="https://example.com">Example Link</a> </body> </html> ``` 此代码片段展示了如何正确配置 `a:visited` 并与其他伪类协同工作。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值