“检查"悬停元素? [英] "Inspect" a hover element?
问题描述
注意:我读过类似的主题，但都不是我的问题 - 我可以右键单击它，然后它就会消失.
Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.
我发现检查元素"是 Chrome 中的一个非常宝贵的工具，但是我最近的一次尝试是在我学习你们中许多人已经拥有的神奇方式时看到我在我的导航栏上为一个元素创建了一个子菜单，它在下面弹出悬停在它的父项上.
I find "Inspect Element" an invaluable tool in Chrome, however my latest foray as I learn the wizardly ways many of you already possess saw me creating a sub-menu for an element on my nav bar, which pops up below on hover of it's parent item.
弹出(或向下)的样式不是我想要的样式，所以我右键单击 > 检查元素以查看来自何处的内容，并更好地了解如何实现我想要的效果.
The popup(or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.
但是，一旦我将鼠标从菜单上移开，它就消失了.
However, as soon as I move my mouse away from the menu, it's gone.
所以我无法在检查窗格中选择不同的元素，同时查看哪个区域突出显示.
So I can't select different elements in the inspection pane, and see which area is highlighted at the same time.
有没有办法解决这个问题，而无需更改菜单，使其在激活后保持弹出"状态?
Is there a way around this, without changing the menu so that it stays "popped up" once activated?
推荐答案
如果悬停是由 JS 触发的，只需通过键盘暂停脚本执行.这是一种比其他答案建议的更简单的冻结 DOM 的方法.
If the hover is triggered by JS, just pause script execution via the keyboard. This is a much simpler way of freezing the DOM than the other answers suggest.
这是您在 Chrome 中执行此操作的方法.我确定 Firefox 有一个等效的程序:
Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:
- 打开开发者工具并转到来源.
注意暂停脚本执行的快捷方式——F8.
与 UI 交互以显示元素.
Interact with the UI to get the element to appear.
这篇关于“检查"悬停元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
