我想看到:hover样式的锚,我在Chrome中徘徊。在Firebug中,有一个样式下拉菜单,允许我为一个元素选择不同的状态。

我似乎在Chrome中找不到任何类似的东西。我遗漏了什么吗?


当前回答

对我来说,为了调试这个工具提示,我点击切换设备工具栏切换到移动视图,然后点击有悬停效果的div,你也可以点击焦点可见来查看div和工具提示之间的间距,希望这将有所帮助。

其他回答

我知道我所做的是相当的变通,但它工作完美,这是我每次都做的方式。

然后,像这样进行:

首先确保Chrome开发工具是未停靠的。 然后,将Dev Tools窗口的任意一侧移动到你想要检查的元素中间。

最后,悬停元素,右键单击并检查元素,将鼠标移动到开发工具窗口,你将能够玩你的元素:悬停css。

干杯!

我用Chrome调试菜单悬停状态,这样做是为了能够看到悬停状态代码:

在元素面板上点击切换元素状态按钮并选择:悬停。

在“脚本”面板中,选择右下角的“事件侦听器断点”,然后选择鼠标->鼠标。

现在检查菜单并选择您想要的方框。当你释放鼠标按钮时,它应该会停止,并在元素面板中显示所选元素的悬停状态(请参阅样式部分)。

使用JS可以触发元素上的MouseEvent。下面是如何对悬停进行操作。

使用右键单击检查元素。 像这样复制JS路径 在Sources Chrome DevTools中按“Esc”键打开控制台。 然后粘贴复制的路径,并添加.dispatchEvent(new MouseEvent('mouseover', {'bubbles': true}));是这样的: 按enter键,然后可以与悬停状态后发生的任何DOM更改进行交互。

有几种方法可以在Chrome开发工具中查看HOVER STATE样式。

方法1

方法2

与Firefox默认开发者通行费

与Firebug

如果有帮助的话,这在最新的Chrome(47.0.2526.106)中似乎更容易:

检查元素,然后单击左侧排水沟中的三个白点:

然后从下拉菜单中选择所需的元素状态: