CSS 请参阅：Chrome 开发者工具中的悬停状态

See :hover state in Chrome Developer Tools

提问by Ben

I want to see the :hoverstyle for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element.

我想查看:hover我在Chrome 中悬停的锚点的样式。在Firebug 中，有一个样式下拉菜单，允许我为元素选择不同的状态。

I can't seem to find anything similar in Chrome. Am I missing something?

我似乎在 Chrome 中找不到类似的东西。我错过了什么吗？

回答by Travis Northcutt

Now you can see both the psuedo-class rules and force them on elements.

现在您可以看到伪类规则并将它们强制应用于元素。

To see the rules like :hoverin the Styles pane click the small :hovtext in the top right.

要查看:hover样式窗格中的规则，请单击右上角的小:hov文本。

To force an element into :hoverstate, right click it.

要强制元素进入:hover状态，请右键单击它。

Additional tips on the elements panelin Chrome Developer Tools Shortcuts.

在对其他提示元素面板在Chrome开发者工具的快捷方式。

回答by Babiker

EDIT: This answer was before the bug fix, see tnothcutt's answer.

编辑：此答案是在错误修复之前，请参阅 tnothcutt 的答案。

这有点棘手，但这里是：

• Right-click element, but DON'T move your mouse pointer away from the element, keep it in hover state.
• Choose inspect element via keyboard, as in hit up arrow and then Enter key.
• Look in developer tools under Matched CSS Rules, you should be able to see :hover.

• 右键单击元素，但不要将鼠标指针从元素上移开，将其保持在悬停状态。
• 通过键盘选择检查元素，如点击向上箭头，然后回车键。
• 查看匹配 CSS 规则下的开发人员工具，您应该能够看到 :hover。

PS: I tried this on one of your question tags.

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

回答by k0pernikus

I wanted to see the hover state on my Bootstrap tooltips. Forcing the the :hover state in Chrome dev Tools did not create the required output, yet triggering the mouseenter event via console did the trick in Chrome. If jQuery exists on the page you can run:

我想在 Bootstrap 工具提示上看到悬停状态。在 Chrome 开发工具中强制 :hover 状态并没有创建所需的输出，但是通过控制台触发 mouseenter 事件在 Chrome 中起到了作用。如果页面上存在 jQuery，您可以运行：

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

回答by Santosh Khalse

There are several ways to see HOVER STATEstyles in Chrome Developer Tools.

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

Method 01

方法01

Method 02

方法02

With Firefox Default Developer Toll

使用 Firefox 默认开发人员收费

With Firebug

与萤火虫

回答by Ianp

In case it helps, this seems to be easier in the latest Chrome (47.0.2526.106):

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

Inspect element and then click on the three white dots in the left gutter:

检查元素，然后单击左侧装订线中的三个白点：

Then choose the desired element state from this dropdown:

然后从此下拉列表中选择所需的元素状态：

回答by rmartrenado

I know that what I do is quite the workaround, however it works perfectly and that is the way I do it everytime.

我知道我所做的是一种很好的解决方法，但是它工作得很好，这就是我每次做的方式。

Then, proceed like this:

然后，像这样继续：

• First make sure Chrome Developer Tools is undocked.
• Then, just move any side of the Dev Tools window to the middle of the element you want to inspect while hovered.

• 首先确保 Chrome 开发者工具未停靠。
• 然后，只需将“开发工具”窗口的任何一侧移动到您要在悬停时检查的元素的中间。

• Finally, hover the element, right click and inspect element, move your mouse into the Dev Tools window and you will be able to play with your element:hover css.

• 最后，将元素悬停，右键单击并检查元素，将鼠标移动到开发工具窗口中，您将能够使用您的元素：悬停 css。

Cheers!

干杯!

回答by Bryan Field

I don't think there is a way to do this. I submitted a feature request. If there is a way, the developers at Google will surly point it out and I will edit my answer. If not, we will have to wait and watch. (you can star the issue to vote for it)

我不认为有办法做到这一点。我提交了一个功能请求。如果有办法，谷歌的开发人员会毫不客气地指出，我会编辑我的答案。如果没有，我们将不得不等待和观察。（您可以为问题加注星标以对其进行投票）

---

---

Comment 1 by Chrome project member: In 10.0.620.0, the Styles panel shows the :hover styles for the selected element but not :active.

Chrome 项目成员的评论 1：在 10.0.620.0 中，样式面板显示所选元素的 :hover 样式，但不显示 :active。

---

---

(as of this post) Current Stable channelversion is 8.0.552.224.

（截至本文）当前稳定频道版本为 8.0.552.224。

You can replace your Stable channelinstallation of Google Chrome with the Beta channelor the Dev channel(See Early Access Release Channels).

您可以使用Beta 频道或Dev 频道替换您的 Google Chrome稳定版频道安装（请参阅早期访问发布频道）。

You can also install a secondary installation of chrome that is even more up to date than the Dev channel.

您还可以安装比 Dev 频道更新的 chrome的二次安装。

... The Canary build is updated even more frequently than the Dev channel and is not tested before being released. Because the Canary build may at times be unusable, it cannot be set as your default browser and may be installed in addition to any of the above channels of Google Chrome. ...

... Canary 版本的更新频率甚至高于 Dev 频道，并且在发布之前未进行测试。由于 Canary 版本有时可能无法使用，因此无法将其设置为您的默认浏览器，并且除了上述任何 Google Chrome 渠道之外，还可以安装它。...

回答by Leniel Maccaferri

I was debugging a menu hoverstate with Chrome and did this to be able to see the hover state code:

我正在hover使用 Chrome调试菜单状态，并这样做是为了能够看到悬停状态代码：

In the Elementspanel click over Toggle Element statebutton and select :hover.

在Elements面板中单击Toggle Element state按钮并选择:hover。

In the Scriptspanel go to Event Listeners Breakpointsin the right bottom section and select Mouse -> mouseup.

在Scripts面板中转到Event Listeners Breakpoints右下部分并选择Mouse -> mouseup。

Now inspect the Menu and select the box you want. When you release the mouse button it should stop and show you the selected element hover state in the Elementspanel (look at the Stylessection).

现在检查菜单并选择您想要的框。当您释放鼠标按钮时，它应该停止并在Elements面板中向您显示所选元素的悬停状态（查看该Styles部分）。

回答by Alireza

Changing to hoverstatus in Chrome is pretty easy, just follow these steps below:

在 Chrome 中更改悬停状态非常简单，只需按照以下步骤操作即可：

1) Right clickin your page and select inspect

1）右键单击您的页面并选择检查

2) Select the element you like to have inspect in the DOM

2) 在DOM 中选择您想要检查的元素

3) Select the pin icon (Toggle Element State)

3) 选择图钉图标 (Toggle Element State)

4) Then tick the hover

4）然后勾选悬停

Now you can see the hover state of the selected DOMin the browser!

现在您可以在浏览器中看到所选DOM的悬停状态了！

回答by Sean Song

In my case, I want to dubug bootstrap tooltip. But the methods above not work for me. I guess bootstrap implemented this by something like mouse in/out event.

就我而言，我想复制引导工具提示。但是上面的方法对我不起作用。我猜引导程序是通过鼠标输入/输出事件来实现的。

Anyway, when I hover on a button, it will generate a brother html element below the button, so I select the button's parent element in "Elements" tab of "Developer tools" window, hover the button, and "Ctrl + C", then I can paste the source code which contains the generated code. Last find the generated code, and add it to the source code by "Edit as HTML" in "Elements" tab.

无论如何，当我将鼠标悬停在按钮上时，它会在按钮下方生成一个兄弟 html 元素，因此我在“开发人员工具”窗口的“元素”选项卡中选择按钮的父元素，将鼠标悬停在按钮上，然后“Ctrl + C”，然后我可以粘贴包含生成代码的源代码。最后找到生成的代码，并通过“元素”选项卡中的“编辑为 HTML”将其添加到源代码中。

Hope it can help somebody.

希望它可以帮助某人。