代码之家  ›  专栏  ›  技术社区  ›  Jason C

如何调试CSS/javascript悬停问题

  •  70
  • Jason C  · 技术社区  · 15 年前

    我经常发现自己想要调试CSS布局问题,这些问题涉及到由JavaScript对悬停事件的响应而引起的DOM更改,或者由于:悬停选择器而应用的不同CSS规则。

    通常,我会使用firebug检查给我带来麻烦的元素,看看它的css属性是什么,以及这些属性来自哪里。但是,当涉及到悬停时,就变得不可能了,因为一旦您将鼠标向下移动到Firebug面板,您感兴趣的元素就不再悬停,应用的CSS规则不同,并且(在JS悬停的情况下)DOM也会更改。

    是否有任何方法可以“冻结”dom的状态和应用程序:悬停以检查dom的状态 在期间 悬停事件?

    当然,关于如何调试此类问题的任何其他想法都是受欢迎的。

    15 回复  |  直到 6 年前
        1
  •  22
  •   Matt Bridges    15 年前

    添加一个 onmouseover 函数处理程序到正在获取 :hover . 在函数内部,调用 console.info(element) 关于你想知道的元素。

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

    当您在激活firebug的情况下运行此命令时,该元素将可在firebug控制台中进行检查。

        2
  •  44
  •   Neum    14 年前

    你可以在Firebug中这样做,但它有点“小车”。如果检查元素,然后单击“HTML”选项卡,再单击“DOM”选项卡,例如,当返回“HTML”选项卡时,右侧的“样式”CSS选项卡将有一个箭头下拉选择器,您可以在其中选择要激活的元素的:悬停状态。切换标签让它显示真是太糟糕了,但它对我很有用。

        3
  •  31
  •   Subodh Ghulaxe    12 年前

    检查链接时,Firebug显示默认的CSS状态,即应用于:链接的样式。默认情况下,不会显示:悬停和:活动样式。幸运的是,您可以通过单击样式并选择适当的选项来更改链接的状态:

    enter image description here

        4
  •  19
  •   Costique    12 年前

    在Firebug中,在HTML视图中,查看右侧面板并找到“样式”选项卡。单击向下箭头并选择 :hover .

        5
  •  5
  •   Maximilian Köhler    9 年前

    在Firefox(v33.1.1)中:

    • 检查元件(Q)
    • 在DOM视图中,右键单击元素
    • 在上下文菜单底部选择:悬停、:活动或:聚焦
        6
  •  3
  •   Arlo    11 年前

    一些JavaScript工具包(如Dojo)使用诸如dijitbuttonhover之类的CSS类来设置样式,而不是:hover。

    所以样式选项卡:悬停技巧不起作用。

    相反,您可以右键单击HTML选项卡中的节点(CSS类的更改者),然后单击“属性更改时中断”。

        7
  •  3
  •   xonya    10 年前

    在Chrome(版本35)中:

    • 检查元素
    • 在元素查看器中,右键单击元素。
    • 选择“强制元素状态”->:活动,:悬停,:聚焦,:访问
        8
  •  2
  •   Dimitar Christoff    15 年前

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

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

    装上它,然后你有两个可能的工具供你使用。

    1. 从任何鼠标悬停元素上的文件继承的css,使用shift-ctrl-y

    2. 计算的CSS(包括任何不在.css文件中的内联样式=已应用-或通过jquery等中的.css方法)-按shift-ctrl-f

    后者还将返回应用于元素的所有类。

    当然,它还有其他一些很好的用途,比如对表单进行出色的调试,包括编辑隐藏字段和cookie(可以用于渗透测试)。

        9
  •  2
  •   TryTryAgain    12 年前

    您还可以检查该元素,然后在样式选项卡上应该有一个小的下拉箭头。它将有类似“显示用户代理”、“扩展速记属性”的内容,那么在该内容下还应该有2个(我猜您正在检查具有悬停状态的内容) :active :hover 选择 悬停 你应该是金的。

        10
  •  1
  •   Michael Sibley    14 年前

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

    defaults write com.apple.Safari WebKitDeveloperExtras -bool true
    

    在浏览器中激活悬停元素,然后右键单击并选择“检查元素”。页面将在当前状态下冻结,允许您根据自己的心脏内容查看短暂的对象。

        11
  •  1
  •   Spencer    14 年前

    Firebug中没有完美的解决方案(鼠标悬停模拟效果)。

    但是,有几种方法可以在Firebug中编辑悬停状态:

    1. 添加一个 :active 州,连同你的 :hover

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

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

    2. 转弯 悬停 状态变为 .hover

      您可以通过单击源文件(在Firebug的样式选项卡中)来编辑CSS规则。

      当然,你可以添加(和删除) 翱翔 从元素中类。

        12
  •  0
  •   Ecropolis    13 年前

    我经常做一些替代的CSS或JavaScript来“冻结”我的悬停事件;用Firebug将其调整到完美状态,并将悬停放回原位。

        13
  •  0
  •   ЯegDwight kri    12 年前

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

        14
  •  0
  •   Gabriel McAdams    8 年前

    我知道这篇文章有点旧,但是对于那些在谷歌上找到这篇文章的人,我创建了一个跨浏览器工具,允许你只需移动鼠标就可以可视化你的HTML/CSS布局。您可以在悬停状态下轻松查看元素。

    HTML Box Visualizer - GitHub

        15
  •  0
  •   balu    6 年前

    在较新的火狐版本(至少v57及以上版本)中,检查员的用户界面与发布其他答案时略有不同。启用和冻结 :active / :hover / :focus 元素的状态,检查它(右键单击->检查元素),然后在检查器中单击:

    enter image description here

    结果:

    enter image description here

    Source (图片是根据CC-BY-SA v2.5(Mozilla贡献者)获得许可的)