How can I keep the hovered menu item open so I can edit it's style with firebug?


Tags: css,firefox,firebug

Problem :

I click on the firebug icon and then I hover over a menu item in order to check it's css on firebug css editor

enter image description here

Then I hover over the style editor in order to changed something their and because the menu closes the css loses it's focus

enter image description here

How can I keep the hovered menu open so I can edit it's style with firebug?



Solution :

There are two cases how such hover menus are displayed, which need to be handled differently

  1. Via CSS
    This means the menus are displayed using the :hover pseudo-class. In this case you can keep the menu displayed by selecting the element reacting to the hovering within the HTML panel and then choosing the :hover option within the Style side panel's options.

  2. Via JavaScript
    This means the menus are displayed via some JavaScript event like mouseover or click. To be able to inspect the menus and change their styles, you need to stop the script execution as soon as a menu is hovered. If a class is added or the display CSS property is changed on the inline style a the menu element when it's hovered, you can achieve this by right-clicking one of the menu elements within the HTML panel and choosing Break On Attribute Change from the context menu and then hovering the menu within the page. Then the script execution will be stopped and you'll be able to switch back to the HTML panel to inspect and edit the styles.
    Note: The Script panel must be enabled for this to work.

    Instead of using the Break On Attribute Change option, which only works for a single HTML element, the general Break On Mutate function ( Break On Mutate button ) may also work for this purpose.


    CSS Howto..

    How to use global stylesheet with css loader

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to select with css specific id only if have specific class on same div?

    jquery how to make an element comeback to initial position after animation

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    How to load specific set css commands only at the first browsing of the web site?

    How to inspect precompiled minified SASS code

    How to use CSS in html table inside javascript

    Textarea doesn't show newline in IE

    How to format a table using CSS such that the table is within the screen and cells use as much possible and necessary width?

    How to disable and enable css rule

    CSS How to center a div horizontally

    How to put images behind each other in css

    How do sprites work in jqmobile?

    Dynamic HTML 3 layers nested quotes - how to do?

    How to scale down retina image sprite with css

    How to use another brackets/tabs policy for my CSS?

    How can I style a select option like a table?

    How do you create multiple box-shadow values in LESS CSS

    How do you make the colour of a h1 tag to change if the user hovers over the body in css and html?

    how to base a css rule on inherited value of dir attribute

    How to make all elements in one line?

    How to compress CSS

    How to move nagivation bar to more to the right to fit a logo left of the bar

    How to use JavaScript OnResize with delay or less processing intensive

    CSS Rollovers: how to maintain “hit area” size when hidden image is larger than anchor area

    CSS styling of a line: how to get the line to move with the header above it

    how to add same width on bootstrap dropdown menu item as parent item

    Show a sentence with animation

    Div Title on div border how to [closed]