【spanhover】span:hover鼠标悬停效果不成功解决方法

更新时间:2017-01-30    来源:鼠标特效    手机版     字体:

【www.bbyears.com--鼠标特效】

span:hover,想达到一个鼠标悬停效果。可是调试了半天,hover的效果就是不出现。

 

span{display: block; width: 110px; height: 40px;}
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

本文来源:http://www.bbyears.com/wangyetexiao/30120.html

猜你感兴趣

热门标签

更多>>

本类排行