blocks|key|918514|text|我不确定我是否正确理解了您的问题，但是如果您想查看事件处理程序代码，只需检查元素并查看元素面板的事件侦听器侧栏窗格即可。另一种方法是在Scripts+Panel中按下pause按钮，然后悬停元素。调试器将在第一个事件处理程序的第一条指令处停止。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|918515|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel.
Another way is just press pause button in Scripts Panel and just hover the element.
The debugger will stop at the first instruction of the first event handler.

blocks|key|702369|text|或者，可以使用“脚本”面板中的“事件侦听器断点”侧栏窗格，并选择在鼠标悬停处理程序中暂停。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702370|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

blocks|key|918610|text|这有点烦人，但您需要右键单击元素，然后将鼠标放在链接上，使用键盘选择“检查元素”链接，然后按enter键。这应该会向您显示所选元素的悬停伪类的css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|918611|这里希望他们在未来的构建中能让这件事变得更容易。|918612|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.

Here's hoping they make this a little easier in future builds.

blocks|key|702537|text|现在，您可以看到伪类样式规则并将其强制应用于元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702538|要查看类似:hover的规则，请在“样式”窗格中单击右上角的小虚线框按钮。|offset|length|style|CODE|702539|​|702540|📷|atomic|702541|702542|要强制元素进入:hover状态，请右键单击它。|702543|702544|702545|702546|或者，可以使用“脚本”面板中的“事件侦听器断点”侧栏窗格，并选择在鼠标悬停处理程序中暂停。|702547|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/36c5925a75a6de76cb363784a0558c1f.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/7166918280b16b4ab48cdc50cfdd9fd2.png^0|0|5|6|0|0|0|1|0|0|0|7|6|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|M|3|I|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|P|3|I|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|K|5|L|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|R|3|I|5|6|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]|13|$5|X|Y|Z|A|$10|14|12|-4]]]]

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

To see the rules like <code>:hover</code> in the Styles pane click the small dotted box button in the top right.

<img src="https://i.stack.imgur.com/IlVMn.png" alt="">

To force an element into <code>:hover</code> state, right click it.

<img src="https://i.imgur.com/evzZ2.png" alt="">

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

blocks|key|918904|text|在Chrome中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|918905|您也可以将鼠标悬停在某个元素上，然后单击CTRL%2BSHIFT%2BC检查该元素。|offset|length|style|CODE|918906|在Firefox中：|918907|​|918908|📷|atomic|918909|918910|在firebug中：|918911|918912|918913|918914|来源：https://stackoverflow.com/a/11272205/2165415|918915|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0908a917644623c50743f94ea4422ab8.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/041b4ef72383517e1ab1c08ec255cea9.png|2|LINK|MUTABLE|url|https://stackoverflow.com/a/11272205/2165415^0|0|K|C|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|3|18|2|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1I|8|@]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|O|3|K|5|6|7|1M|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1N|8|@]|9|@]|A|$]]|$1|R|3|K|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|M|5|N|7|1P|8|@]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|T|3|K|5|6|7|1T|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1U|8|@]|9|@$D|1V|E|1W|1|1X]]|A|$]]|$1|W|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]|15|$5|Z|10|11|A|$12|16|14|-4]]|17|$5|18|10|19|A|$1A|1B]]]]

<h1>In Chrome:</h1>

You can also mouseover on an element, and then click <code>CTRL+SHIFT+C</code> to inspect that element.

<h1>In Firefox:</h1>

<a href="https://i.stack.imgur.com/bhTuO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhTuO.png" alt="enter image description here"></a>

in firebug:

<img src="https://i.stack.imgur.com/OpKZu.png" alt="enter image description here">

source: <a href="https://stackoverflow.com/a/11272205/2165415">https://stackoverflow.com/a/11272205/2165415</a>

blocks|key|702665|text|请在下面的链接中查看答案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702666|See+:hover+state+in+Chrome+Developer+Tools|offset|length|702667|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools/41501475#41501475^0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Please have a look on below link for answer

<a href="https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools/41501475#41501475">See :hover state in Chrome Developer Tools</a>

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?

How to use chrome web inspector to view hover code

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

使用chromes web检查器来查看代码非常有用。但是，例如，您如何查看按钮的悬停代码？您必须将鼠标悬停在按钮上，因此不能在检查器中使用它(鼠标)。在检查器中是否有快捷方式或其他方法来完成此操作？

问如何使用chrome web检查器查看悬停代码
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用chrome web检查器查看悬停代码EN