首页 文章

如何调试CSS / Javascript悬停问题

提问于
浏览 次
70

我经常发现自己想要调试CSS布局问题，这些问题涉及由Javascript引起的DOM更改，以响应悬停事件或由于：hover选择器而应用的不同CSS规则 .

通常情况下，我会使用Firebug检查那些给我带来麻烦的元素，看看它的CSS属性是什么，以及这些属性的来源 . 但是，当涉及悬停时，它变得不可能，因为只要将鼠标移动到Firebug面板，您感兴趣的元素就不再悬停，适用的CSS规则也不同，（在这种情况下） JS徘徊）DOM被改变了 .

有没有办法我可以"freeze" DOM的状态和应用：悬停以检查DOM，因为它是 during 悬停事件？

当然，欢迎任何关于如何调试此类问题的其他想法 .

javascript html css firebug hover

15 回答

  • 19

    在Chrome中（第35版）：

    • 检查元素

    • 在元素查看器内右键单击元素 .

    • 选择"Force element state" - >：active，：hover，：focus，：visited

    回复于
  • 1

    将 onmouseover 函数处理程序添加到采用 :hover 的元素 . 在该函数内部，在您想知道的任何元素上调用 console.info(element) .

    myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

    当您使用firebug激活时运行此元素，该元素将可用于在firebug控制台中进行检查 .

    回复于
  • 22

    你可以在Firebug中做到这一点，但它有点“马车” . 如果您检查元素然后单击html选项卡，例如关闭DOM选项卡，当您返回到html选项卡时，右侧的“style”css选项卡将有一个箭头下拉选择器，您可以在其中选择：该元素的悬停状态为活动状态 . 很难切换标签让它显示但它对我有用 .

    回复于
  • 2

    在检查链接时，Firebug显示默认的CSS状态，即应用于：link的样式 . 默认情况下，不显示：hover和：active样式 . 幸运的是，您可以通过单击样式并选择适当的选项来更改链接的状态：

    enter image description here

    回复于
  • 31

    在firebug中，在HTML视图中，查看右侧面板并找到"Styles"选项卡 . 单击向下箭头并选择 :hover .

    回复于
  • 3

    在Firefox（v33.1.1）中：

    • 检查元素（Q）

    • 在DOM视图中右键单击该元素

    • select：hover，：active或：焦点位于上下文菜单的底部

    回复于
  • 0

    一些JavaScript工具包（如Dojo）使用CSS类（如dijitButtonHover）来设置样式而不是：hover .

    所以样式选项卡：悬停技巧不起作用 .

    相反，您可以在HTML选项卡中右键单击节点（谁的CSS类更改），然后“中断属性更改”

    回复于
  • 0

    对于CSS问题，我发现Web开发人员插件非常宝贵：

    http://chrispederick.com/work/web-developer/

    装载它，然后你有2个可能的工具供您使用 .

    • 从任何moused-over元素上的文件继承css，使用shift-ctrl-y

    • 计算css（包含任何不在.css文件中的内联样式=应用 - 或通过jquery中的.css方法等） - 按shift-ctrl-f

    后者也会返回应用于元素的所有类 .

    当然它有其他很好的用途，例如，精湛的表格调试，包括隐藏字段和cookie的编辑（可用于渗透测试）

    回复于
  • 1

    你也可以检查那个元素，然后在样式上选项卡应该有一个小的下拉箭头 . 它会有"Show User Agent"，"Expand Shorthand Properties"之类的东西，然后应该还有2个（我猜你正在检查有悬停状态的东西） :active 和 :hover 选择 :hover 你应该是金色的 .

    回复于
  • 5

    我遇到了同样的问题，发现虽然我无法使用Firebug检查Firefox中的悬停对象，但Safari的Web Inspector会冻结当前状态并允许检查 . 要激活Safari的Web检查器，只需在终端中输入以下行并重新启动Safari：

    defaults write com.apple.Safari WebKitDeveloperExtras -bool true

    在浏览器中激活悬停元素，然后右键单击并选择“Inspect Element” . 该页面将冻结其当前状态，允许您根据心脏内容检查稍纵即逝的物体 .

    回复于
  • 44

    在firebug中没有完美的解决方案（鼠标悬停/悬停模拟效果） .

    但是，有几种方法可以在firebug中编辑悬停状态：

    • 添加 :active 状态，以及 :hover

    a:hover, a:active { ... }

    如果您将鼠标放在元素上，拖动并释放，它将保持活动状态 .

    • 将 :hover 状态转换为 .hover 类

    您可以通过单击源文件来编辑CSS规则（在Firebug的“样式”选项卡中）

    然后，当然，您将从元素中添加（并删除） .hover 类 .

    回复于
  • 0

    我经常制作一些替代的CSS或Javascript来“冻结”我悬停的事件;用Firebug将它调整到完美，然后将我的悬停放回原位 .

    回复于
  • 0

    是的，您可以在触发悬停状态时右键单击“检查元素” . 这在Firebug和WebKit中对我有用 .

    回复于
  • 3

    我知道这篇文章有点陈旧，但对于那些在谷歌上发现这个帖子的人，我创建了一个跨浏览器工具，只需移动鼠标即可实现HTML / CSS布局的可视化 . 您可以轻松查看悬停状态中的元素 .

    HTML Box Visualizer - GitHub

    回复于
  • 2

    在较新的Firefox版本（至少是v57及更高版本）中，检查员的UI与发布其他答案时略有不同 . 要启用和冻结元素的 :active / :hover / :focus 状态，请检查它（右键单击 - >检查元素），然后在检查器中单击：

    enter image description here

    结果：

    enter image description here

    Source（图片根据CC-BY-SA v2.5，Mozilla贡献者获得许可）

    回复于

相关问题