如何使用firebug检查CSS伪类?

时间:2022-10-30 08:37:12

I am struggling with a reluctant a:hover css style which I cannot override.

我正在与不情愿的a:悬浮css样式做斗争,我无法覆盖它。

I tried to inspect the element in Firebug, but I cannot see why it won't work. I don't even see how to properly inspect a:hover css event in Firebug.

我试图检查Firebug中的元素,但是我不明白为什么它不能工作。我甚至不知道如何在Firebug中正确地检查:hover css事件。

I have seen:
Hover Inspection in Firebug http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/
but I have not figured out how to reproduce the steps mentioned there.

我已经看到:在Firebug http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/中进行悬浮检查,但是我还没有找到如何复制上面提到的步骤。

Also: Pseudo-Phantoms http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

还:Pseudo-Phantoms http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

How do I inspect/debug CSS pseudo classes like :hover with Firebug?

我如何检查/调试CSS伪类,比如:Firebug?

3 个解决方案

#1


42  

It's pretty easy. Just select the element you want to inspect. And then, from the panel on the right side, click on the Style menu item. There you can select the pseudo class :hover

它很简单。只需选择要检查的元素。然后,从右边的面板中,单击Style菜单项。在那里您可以选择pseudo类:hover。

EDIT

编辑

Here's an image : 如何使用firebug检查CSS伪类?

这里有一个图片:

#2


0  

Theres also the INSPECT ELEMENT option, just rightclick on the hovered element in Firefox + Firebug, and thats it. The style menu is handly too.

还有检查元素选项,只要在Firefox + Firebug中右键单击,就可以了。样式菜单也很方便。

#3


0  

A useful technique when resolving issues like this can be to compare the hover state and non-hover state. Open two instances of the browser (a dual or triple screen setup is useful), load the page you're working on in each window, then do what JohnP says in his answer to view the styles for the hover state in one window, the non-hover in the other, and and take the analysis from there. It's awkward in Firebug to compare the styles when the style dropdown covers the actual css detail pane, and whilst you can view the hover and non-hover state css in Firefug by moving the mouse over and off the element you're working on, doing a comparison this way is more tricky.

在解决此类问题时,一个有用的技巧是比较悬停状态和非悬停状态。打开浏览器的两个实例(一个双重或三重屏幕设置非常有用),加载页面你工作在每个窗口,然后做JohnP说在他的答案查看悬停状态的风格在一个窗口中,non-hover的另一方,并采取分析。在Firebug比较尴尬的css样式下拉时的风格涵盖实际细节窗格中,同时您可以查看悬停和non-hover州css Firefug通过移动鼠标和元素你工作,这样做比较更棘手。

#1


42  

It's pretty easy. Just select the element you want to inspect. And then, from the panel on the right side, click on the Style menu item. There you can select the pseudo class :hover

它很简单。只需选择要检查的元素。然后,从右边的面板中,单击Style菜单项。在那里您可以选择pseudo类:hover。

EDIT

编辑

Here's an image : 如何使用firebug检查CSS伪类?

这里有一个图片:

#2


0  

Theres also the INSPECT ELEMENT option, just rightclick on the hovered element in Firefox + Firebug, and thats it. The style menu is handly too.

还有检查元素选项,只要在Firefox + Firebug中右键单击,就可以了。样式菜单也很方便。

#3


0  

A useful technique when resolving issues like this can be to compare the hover state and non-hover state. Open two instances of the browser (a dual or triple screen setup is useful), load the page you're working on in each window, then do what JohnP says in his answer to view the styles for the hover state in one window, the non-hover in the other, and and take the analysis from there. It's awkward in Firebug to compare the styles when the style dropdown covers the actual css detail pane, and whilst you can view the hover and non-hover state css in Firefug by moving the mouse over and off the element you're working on, doing a comparison this way is more tricky.

在解决此类问题时,一个有用的技巧是比较悬停状态和非悬停状态。打开浏览器的两个实例(一个双重或三重屏幕设置非常有用),加载页面你工作在每个窗口,然后做JohnP说在他的答案查看悬停状态的风格在一个窗口中,non-hover的另一方,并采取分析。在Firebug比较尴尬的css样式下拉时的风格涵盖实际细节窗格中,同时您可以查看悬停和non-hover州css Firefug通过移动鼠标和元素你工作,这样做比较更棘手。