Firefox:悬停在元素上时如何停止和检查添加的新样式?

2022-01-22 00:00:00 firefox hover css firefox-developer-tools

我正在使用 Firefox 进行开发.

I am using Firefox for development.

当我将鼠标悬停在 A 标签上时，我想看看它添加了哪些 CSS 样式.如何在 Firefox 中执行此操作?

I would like to see what CSS styles are added to A tag when I hover the mouse over it. How can I do this in Firefox?

更新

我右键单击标签并选择检查元素.我可以看到添加到右下窗格的样式.但是，如果我将鼠标移动到 CSS 窗格来检查样式，那么添加的 CSS 样式就会消失.我知道我可能需要中断一些事情，但我无法让它发挥作用.

I right-clicked on the tag and select inspect the element. I can see the styles added to the bottom right pane. However, if I move the mouse to the css pane to examine styles, then the added CSS styles disappear. I understand that I may need to break on something, but I cannot get it working.

谢谢！

推荐答案

  1. 右击→检查元素
  2. 选择检查员"；标签
  3. 在标记中找到要检查的元素
  4. 右击(选中元素)→ 更改伪类 → :hover
  5. 检查 CSS Rules 选项卡，了解发生了什么变化.
  1. Right click → Inspect Element
  2. Select the "Inspector" tab
  3. Find the element that you want to examine inside your markup
  4. Right click (on the selected element) → Change Pseudo-class → :hover
  5. Check the CSS Rules tab to see what changes occur.

这是当鼠标不在元素上时强制 :hover 状态的方法.

This is the way to force :hover state when your mouse is not over an element.

相关文章