firebug修改A标签链接:hover状态的css样式

firebug是火狐浏览器firefox的一个插件,firebug可以调试html,css,javascript,是网站前台开发不可或缺的调试工具,尤其调用JS的功能强大

firebug

如果你还没有安装firebug,可以直接打开官网安装体验下,而本文主要介绍firebug的一个功能,因为之前一直用firebug查看css样式,但有一直不知道怎么修改A标签链接:hover有状态的样式。比如下面的代码

<div class="arctest">
    <style>
    .arctest a{ font:700 22px/33px Microsoft Yahei; color:#333; text-decoration:none;}
    .arctest a:hover{ background:green; color:#fff; text-decoration:none;}
    </style>
    <a href="http://www.qmtx3.com/">窍门天下 http://www.qmtx3.com</a>
</div>

我要修改这个链接:hover状态的样式,在firebug里默认是没有显示:hover的样式,如下图所示

firebug默认不显示链hover样式

只有当鼠标移上去的时候他才会显示hover状态样式,但移动鼠标去右边修改时就消失了根本无法修改,后来查了资料,才知道firebugj里有个小工具,在右边的面板中点击“样式”选项卡,在弹出的菜单中勾选“:hover”项,如下图所示

勾选firebug的:hover项

这样就可以直接修改A标签链接的:hover样式了。