检查Chrome中的悬停元素? [英] Inspect hovered element in 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中的悬停元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！