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

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


当前回答

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

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

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

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

其他回答

我认为没有办法做到这一点。我提交了一个功能请求。如果有办法的话,谷歌的开发人员肯定会指出来,我会编辑我的答案。如果没有,我们将不得不等待和观察。(你可以用星号来投票)


在10.0.620.0中,Styles面板显示了所选元素的:hover样式,但没有显示:active样式。


当前稳定频道版本为8.0.552.224。

你可以替换你的稳定频道安装的谷歌Chrome与Beta频道或开发频道(见早期访问发布频道)。

你也可以安装一个chrome的辅助安装,它甚至比Dev通道更最新。

... Canary版本的更新频率甚至比Dev频道还要高,并且在发布之前不会进行测试。因为金丝雀构建可能有时不可用,它不能设置为您的默认浏览器,可以安装在谷歌Chrome. ...的任何上述渠道之外

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

然后,像这样进行:

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

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

干杯!

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!

干杯!

编辑:这个答案是在错误修复之前,见tnotcutt的答案。这有点棘手,但如下所示:

右键单击元素,但不要将鼠标指针移离元素,保持悬停状态。 通过键盘选择检查元素,就像点击箭头,然后回车键。 在开发工具中匹配的CSS规则下,你应该可以看到:hover。

PS:我在你的一个问题标签上试过这个方法。

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

方法1

方法2

与Firefox默认开发者通行费

与Firebug