css – 为什么文本修饰不能在a:hover下工作?

.twoColFixRt#nav-primary .nav li a,
    .twoColFixRt#nav-primary .nav li a:visited
    {
        颜色:#00FF00;
        文字修饰:无;
    }
    .twoColFixRt#nav-primary .nav li a span {
        显示:块;
        填充:0 10px;
        font-size:15px;
    }
    .twoColFixRt#nav-primary .nav li a:hover {
        文字装饰:下划线;
        颜色:#FF0000;
    }

Q1>我不知道为什么a:悬停在上面的代码中不起作用.换句话说,当光标位于导航项的顶部时,下划线不会显示.

但是,当我将光标悬停在导航项上时,我确实看到了颜色的变化.

Q2>我正在使用DW CS4 Firebug.有没有办法让我检测出哪个规则可以抑制:悬停以便我将来可以找出类似的问题?

谢谢

解决方法

您可以通过将其应用于嵌套范围来显示文本修饰,如下所示:

.twoColFixRt #nav-primary .nav li a:hover span {
    text-decoration: underline;
    color:#FF0000;
}

如果您对目前不适合您的原因感兴趣,可以阅读this question关于包含块框的内联框(您的< a>)(您的< span>).

至于检测哪些规则应用于元素,我使用Web Developer插件用于Firefox.这是CSS>查看样式信息(CTRL SHIFT Y)对此特别方便.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效