Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

editWindow with hover after page load

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):

editWindow missing hover effect with Firebug activated

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!

like image 494
k102 Avatar asked May 29 '13 11:05

k102


1 Answers

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.

like image 87
keaukraine Avatar answered Nov 15 '22 04:11

keaukraine