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

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


当前回答

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

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

其他回答

我可以通过遵循Babiker建议的以下步骤来看到风格 右键单击元素,但不要将鼠标指针移离该元素,保持悬停状态。通过键盘选择检查元素,就像点击箭头,然后回车键。”

改变风格遵循以上步骤,然后- 通过按键盘上的ctrl + tab来更改浏览器选项卡。 然后单击要调试的选项卡。你的悬停屏幕仍然在那里。现在小心地将鼠标移到开发人员工具区域。

我认为这在Chrome中不再是一个问题,只是以防万一。我写了这个jQuery脚本,当我用TAB键移动时检查DOM。

如果更改为使用'mouseover',将看起来像这样:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

您可以轻松地修改它,以便在单击或对想要停止的元素进行操作时删除事件处理程序。

我想在引导工具提示上看到悬停状态。在Chrome开发工具中强制:hover状态并没有创建所需的输出,然而通过控制台触发mouseenter事件在Chrome中却做到了这一点。如果页面上有jQuery,你可以运行:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

现在可以看到两个伪类规则,并将它们强加到元素上。

要查看样式窗格中的:hover之类的规则,单击右上方的小:hov文本。

要强制一个元素进入:hover状态,右键单击它并选择:hover。

在Chrome开发人员工具快捷方式的元素面板上的额外提示。

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

方法1

方法2

与Firefox默认开发者通行费

与Firebug