检查 Chrome 中的悬停元素?

问题描述

我正在尝试通过 Chrome 的开发人员工具查看工具提示在网站上的结构.但是，即使我将鼠标悬停在项目上，当我检查元素"时，html 中的工具提示也不会显示任何内容.我知道我可以将样式设置为 :hover，但我仍然看不到工具提示的 html 或 css.

I am trying to view, through Chrome's developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I "inspect element", nothing shows for the tooltip in the html. I know I can set the Style to :hover, but I still can't see the html or css of the tooltip.

有什么想法吗?

推荐答案

我实际上发现了一个使用 Twitter Bootstrap 工具提示的技巧.如果您在另一台显示器上打开开发工具 (F12)，然后将鼠标悬停在元素上以显示工具提示，右键单击就像选择检查元素"一样.保持该上下文菜单打开，将焦点移到开发工具上.工具提示的 html 应显示在元素旁边，它是 HTML 中的工具提示.然后您可以将其视为另一个元素.如果您返回 Chrome，HTML 就会消失，所以需要注意一些事项.

I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.

有点奇怪，但它对我有用，所以我想我会分享它.

Kind of a weird way but it worked for me so I figured I would share it.

这篇关于检查 Chrome 中的悬停元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！