css - Chrome 的 Firebug Lite 破坏了悬停效果和鼠标悬停事件

标签 css google-chrome hover firebug firebug-lite

我有一个奇怪的问题:使用 Firebug Lite for Chrome 时,有时悬停不起作用。

我得到的是这样的 div:

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

和这个 CSS:

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

当我第一次打开页面然后激活 Firebug 时,一切看起来像这样:

editWindow with hover after page load

但是如果我先激活 Firebug 然后打开这个页面,悬停就不起作用了。我在 Firebug 控制台中没有看到错误,也没有悬停效果,就像这样(鼠标指针在那里,相信我):

editWindow missing hover effect with Firebug activated

我只在 Chrome 中遇到过这个问题(Firefox 运行良好),在 Win7 和 Linux(Mint 14)上都是如此。

可能是什么原因?我很困惑。

编辑

在开发工具菜单中使用 Force element state -> :hover 时,悬停样式有效。

编辑2

我已将 onmouseover="alert('test');" 添加到这些 li 元素之一。在第二种情况下,alert 甚至没有被调用!

最佳答案

这可能不是您实际需要的,但如果您使用常用的 Chrome 开发人员工具而不是 Firebug for Chtome,您可以强制元素具有特定状态。只需右键单击元素树中的元素,然后在Force Element State 菜单项中选择任何状态。对于修改 CSS 非常有用。恕我直言,最好在 Chrome 中使用 native 工具,尽管 Firebug 可能更有用。

关于css - Chrome 的 Firebug Lite 破坏了悬停效果和鼠标悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16812741/

相关文章:

css - 模糊的线性渐变在 chrome 中停止

css - 突出显示 CSS 网格

css - 在 react 形式中,无法在文本字段中键入或单击或悬停在按钮上

jquery - Div 在图像上和鼠标悬停事件

javascript - 如何在 jQuery 中创建滚动菜单?

html - Aurelia-Cli 添加需要 .scss 文件

html - 使用第 n 个子元素在 css 中选择元素

html - 覆盖不同类 td 中的字体大小

javascript - Chrome - 允许访问网络摄像头

css - 悬停在链接上时如何将图像设置为光标