最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
span:hover鼠标悬停效果不成功解决方法
时间：2022-06-25 10:15:45 编辑：袖梨 来源：一聚教程网
span:hover，想达到一个鼠标悬停效果。可是调试了半天，hover的效果就是不出现。
span{display: block; }
span:hover{background: 0 -40px;}
span.button-1{background:url(../images/tabs/button_1.png);}
样测试出来的结果跟我预期的不一样，我想在span.button-1定义背景图片，然后在鼠标经过时hover显示悬停效果。本应该是会移到背景的第40像素开始显示，可是仍然只显示原始图像。
经过多次测试，终于发现是由于伪类的书写顺序不正确造成的。网上查阅了一下资料，的确伪类有明确的书写顺序规定，如果错了的话就可能造成显示结果不正确。
后来分析一下我的css教程，发现可能是由于最后一行button-1的样式把hover的background又给覆盖了。于是把伪类放到最后，也就是必须将伪类写在本身选择器之后。问题解决。
虽然我的这个问题和伪类之间的顺序并不是很相关，但是这些伪类之间的顺序还是值得关注一下的，省的以后又出现同样的问题。
顺序如下：
a:link
a:visited
a:hover
a:active
相关文章
- jm天堂网页版官方登录入口-jm天堂网页版直接登录入口 12-14
- 蝉妈妈网页版直达入口-蝉妈妈app官方正版入口在哪 12-14
- 豆包AI智能在线网页解析神器-豆包AI智能在线会议纪要生成助手 12-14
- 小红书Web官网登录入口-小红书官方网页版一键登录 12-14
- 苍云阅读app如何快速找到目录-目录入口位置 12-14
- 苹果ID登录官网入口 - 苹果Apple ID账户登录页面一键直达 12-14