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

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


当前回答

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

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

其他回答

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

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

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

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

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

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

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

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

It's also possible that the code can be hidden in the database and there is no actual file containing it. A client of mine has the "Travelify" theme by Colorlib and some of the options from the WP admin GUI write directly to the DB and the DB generates the css code on the fly - I can see the css in html source but nowhere in any actual files. This drove me crazy and took me awhile to figure out. There's a great DB search tool for WP called "Search and Replace" by Inpsyde GmbH that I have found to be invaluable. Be careful with it of course!

干杯!

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

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

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

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

方法1

方法2

与Firefox默认开发者通行费

与Firebug