检查Firebug或Chrome DevTools中的悬停状态 [英] Inspecting Hover-state in Firebug or Chrome DevTools

问题描述

我有一个具有CSS悬停状态的HTML元素。有一个悬停或填充悬停的错误，每当我鼠标悬停，元素的内容滑动一点，它的烦人。

我想使用FireBug或Chrome开发工具进行调试，但是使用这些工具时遇到的一个常见问题是，在从Firebug / devtools中选择元素后我明显需要将鼠标移回开发工具，悬停状态不再启用。

如何使用这些工具检查/调试HTML元素元素处于悬停状态？

解决方案

Chrome开发工具在Elements> Styles面板中内置：悬停状态选择器。您可以在其中切换其他伪类（如：active）。

I've got an HTML element that has a CSS hover-state. There's a bug with the margin or padding on hover and every time I mouseover, the contents of the element slide a little, its annoying.

I'd like to debug using FireBug or Chrome Dev Tools, but a common problem I've had with these tools is that after I select the element from Firebug/devtools I obviously need to move the mouse back to the dev tools and the hover state is no longer enabled.

How do I inspect/debug an HTML element using these tools with the element in its hover state?

解决方案

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.

这篇关于检查Firebug或Chrome DevTools中的悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！