a:hover，a:active失效

最新推荐文章于 2023-06-18 13:06:08 发布
原创 最新推荐文章于 2023-06-18 13:06:08 发布 · 240 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文探讨了CSS中a标签伪类选择器的显示问题：点击后样式一直保持为a:visited，导致a:hover和a:active样式失效。通过调整伪类顺序解决了此问题。

现象：
     a标签的伪类选择器，在点击之后，一直保持为a:visited的样式。a:hover，a:active的css失效了。

解决方式：

    将a:visited样式写在前面，一种顺序为：a:link{} a:visited{} a:hover{} a:active{}。
原因：

    如果写成这样：a:link{} a:hover{} a:active{} a:visited{} 可能是a:visited{}将a:hover{} a:active{}的样式给覆盖了。

 

iteye_19145
关注
csshover.htc在IE7下使用:active伪类无效解决方法
12-13
csshover 相信做前端开发都知道，IE6、IE7都不支持:active伪类，IE6更甚，连:hover伪类都不支持。为了解决这个问题，一般都会引入一个csshover.htc文件来解决。 目前该文件版本为3.11， 如果你发现自己使用的不是...
css3 选择器 简单的分页 css选择器 ul.pagination li a:hover:not(.active) 选择除了类名为 active的项目
liu709127859的专栏
04-24 6200
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>练习 分页</title>        <link type="text/css" href="css/sty
css中的hover ，关于li与a标签的问题
weixin_33894640的博客
12-01 504
<head> <style> ul li a:hover{ background-color: red; } </style></head><ul> <li><a>文字</a></li></ul>这样只有 文字 悬停时会变红 但是
css3常用生僻标签
前端小99的博客
07-09 1115
backgroumd-repeat(repeat-x)平铺 background-repeat:no-repeat; 设置不平铺 background-position 属性改变图像在背景中的位置: 简写形式 backgrond:（#ffffff url() no-repeat right top） background-attachment:fixed;固...
CSS基础学习--18 导航栏
yyxhzdm的博客
06-18 2804
如果要在每个选项上添加边框，可以在每个 元素上添加。导航条基本上是一个链接列表，所以使用 和 元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动 元素，并指定为 元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要 元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。
制作隔行变色的商品列表_前端css基础篇（四）导航栏和隔行变色
weixin_34603379的博客
01-26 438
一、垂直导航条固定在左侧的垂直导航条<style> body{ margin:0; } ul{ list-style-type: none;/*去除li有序列表默认样式*/ margin:0; padding:0; wi...
css行内使用:hover
最新发布
11-04
`:link → :visited → :hover → :active` *错误示例*： ```css a:hover { color: red; } a:link { color: blue; } /* 此规则会覆盖:hover */ ``` 2. **控制同级元素限制** 通过`+`选择器仅能控制**相邻...
CSS :hover选择器详解与交互效果实现
若将 `:hover` 写在 `:active` 之前，可能会导致某些状态下样式失效或冲突，因此正确的顺序对于维护良好的用户体验至关重要。 从浏览器兼容性角度来看，`:hover` 伪类自 CSS2 起就被广泛支持，主流浏览器如 Chrome...
在原有基础不变的情况下完成下面任务任务 3：伪类应用（link/visited/hover/active）（20 分钟） 任务内容 在导航链接中应用 4 个链接伪类，验证 “LVHA”（link→visited→hover→active）顺序的重要性，结合学号后三位设置颜色。 操作步骤 1. 在base.css中定义伪类样式（按正确顺序）： /* 学号后三位S1S2S3 */ a:link { color: #S1S2S3; text-decoration: none; } /* 未访问 */ a:visited { color: #S1+30S2+40S3+20; } /* 已访问 */ a:hover { color: #S1+60S2+70S3+40; text-decoration: underline; } /* 鼠标悬浮 */ a:active { color: #S1+90S2+100S3+60; } /* 点击瞬间 */ 测试顺序影响： ◦ 在index.html的导航栏（如<a href="case.html">案例展示</a>）测试正常效果； ◦ 故意打乱顺序（如hover放在visited前），记录样式失效情况（实验记录）。 效果验证：点击、悬浮导航链接，确认 4 种状态的颜色变化符合预期，且与其他同学的颜色不同（因学号差异）。学号是116
10-25
实际上，这样定义后，未访问链接始终显示a:link的蓝色，而a:hover会被覆盖（因为a:hover在a:link之前，所以a:link覆盖了a:hover），所以悬停效果失效。 但是，根据CSS的层叠规则，伪类选择器的权重相同，所以后...
.link:hover是什么意思
05-08
2. 应按照正确的优先级顺序书写多个关联性的伪类如 link -> visited -> hover -> active ，否则可能导致部分效果失效或混乱[^4]； 3. 如果同一个标签既有通用样式的描述又有特殊情境下的额外定制化需求，则应该合理...
用css来实现除了选中标签外的其他标签的背景颜色设置为指定颜色
qq_44929535的博客
11-30 2180
用css来实现除了选中标签外的其他标签的背景颜色设置为指定颜色 ul li a:not(.active) {background-color: #ddd;} 以上css实现了除了选中标签外的其他标签的背景颜色设置为灰色 ul li a:hover:not(.active) {background-color: #ddd;} 以上css是实现了当鼠标移动到某个元素上时，当这个元素不是被选中的元素时就置灰 ...
10月20日
qq_52345504的博客
10-20 299
1、盒子模型概念基础 2、css的四种选择器 后代选择器 ( ) 子选择器 (>) 相邻兄弟选择器 (+) 通用兄弟选择器 (~) 3、opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明 （使用opacity属性添加透明度时，其所有子元素都继承相同的...
动态响应布局、iconfont笔记
m0_67390788的博客
03-18 1437
clip:rect矩形剪裁功能 rect(30px 200px 200px 20px) rect(top right bottom left) 参数：top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。 说明：裁剪矩形上边距上边的距离是30px 裁剪矩形右边距左边的距离是200px 裁剪矩形下边距上边的距离是200px 裁剪矩形左边距左边的距离20px :not li a:hover:not(.actio
hover 选择器
GuangRong1的博客
11-30 679
所有主流浏览器都支持 :hover 选择器。 定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 hover 和 mouseover +mouseout  一样 $("#searchParams li").hover(             function(){                $(this).attr("class","curre
2.CSS学习笔记
qq_39264084的博客
09-10 817
文章目录2.CSS2.1 语法2.2 三种方式+四种选择2.2.1 三种方式2.2.2 四种选择2.3 CSS样式优先级2.3.1 CSS的继承性（标签从祖先继承来的属性）2.3.2 选择器的优先性（标签自有的属性）2.4 常用样式属性2.4.1 盒子模型、边框、边距、填充2.4.2 背景、文本、字体、显示2.4.3 导航栏(=链接列表)2.4.3.1 垂直导航栏2.4.3.2 水平导航栏2.4.5 下拉菜单2.4.6 分页2.4.7 图片2.4.8 网页布局2.5 响应式设计2.5.1 viewport2
web前端学习（二十七）——CSS3导航栏的相关设置
热门推荐
贝尔摩德苦艾酒
02-07 1万+
web前端学习（二十七）——CSS3导航栏的相关设置
CSS选择器
qq_30906791的博客
11-01 362
选择器是什么？ 选择一个或者一组特定元素的工具称作选择器 选择器本质上有3种类型，即 元素选择器 id选择器 类选择器 除了元素选择器外，两种最常见的选择器形式是id和class选择器。 元素（标签）选择器 元素选择器或标签选择器在HTML标签级别起作用。 当我们在CSS文件中直接为HTML标签添加样式时，这称为元素选择器。 h1{ color:red; } 我们直接将样式分配给了h1标签/元素，这种标签选择和样式化方法称为“元素选择器”，因为我们直接将样式
html左侧导航栏点击下拉菜单,CSS中的导航栏和下拉菜单的实现
weixin_36354924的博客
05-30 3352
一、CSS导航栏(1)导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。(2)垂直导航栏<1>代码如下垂直导航栏主页新闻联系关于垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏body{margin:0;}ul{padding...
a:hover，a:active失效的问题
阿锋--专栏
11-10 4382
现象： a标签的伪类选择器，在点击之后，一直保持为a:visited的样式。a:hover，a:active的css失效了。 解决方式： 将a:visited样式写在前面，一种顺序为：a:link{} a:visited{} a:hover{} a:active{}。 原因： 如果写成这样：a:link{} a:hover{} a:active{} a:visited{} 可能是a:vi
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值