Firebug Lite for Chrome spoils hover effect and mouseover event

问题

I've got a weird issue: when using Firebug Lite for Chrome, sometimes hover does not work.

What I've got: a div like this:

<div class="editWindow">
    <ul>
        <li id="edCha" onclick="channels.add()">
            Редактировать канал
        </li>
        <li id="delCha" onclick="channels.chanLink()">
            Подключить клиента
        </li>
    </ul>
</div>

and this CSS:

.editWindow li:hover, .chooseAction li:hover {
    background: #369;
    color: white;
    cursor: pointer;
}

It all looks like this, when I first open the page and then activate Firebug:

But if I first activate Firebug and then open this page, hover just doesn't work. I see no error in the Firebug console, and no hover effect, like this (the mouse pointer is there, believe me):

I've got this issue only in Chrome (Firefox works well), both on Win7 and on Linux (Mint 14).

What can the cause be? I'm confused.

edit

When using Force element state -> :hover in the dev-tools menu, the hover style works.

edit 2

I've added onmouseover="alert('test');" to one of these li elements. In the second case, alert is not even being called!

回答1:

This might be not what you actually need, but if you use usual Chrome Developer Tools instead of Firebug for Chtome you can force an element to have a certain state. Just right-click on element in elements tree and choose any state in Force Element State menu item. Very useful for modifying CSS. IMHO it is better to use native tools in Chrome, albeit Firebug can be more useful.

来源：https://stackoverflow.com/questions/16812741/firebug-lite-for-chrome-spoils-hover-effect-and-mouseover-event