首页 > 其他分享 >chrome调试工具之[hover悬浮样式]

chrome调试工具之[hover悬浮样式]

时间:2023-10-08 14:36:01浏览次数:32  
标签:hover 鼠标 chrome 元素 悬浮 断点 样式 调试

前言

在调节带有hover样式的元素时,当鼠标移动到上面的时候才会显示相应的元素,鼠标移开时元素就会消失,所以导致无法调节样式问题,第一种方式方便定位元素位置,第二种方式可以解决问题(可以直接看第二种方法!!!)

一、快捷定位元素位置的方法

使用网上的方法,首先F12打开调试工具,找到加了hover样式的元素,鼠标移动到上面然后鼠标右键,不要乱点,移动到控制台页面就行

直接键盘输入N就可以快速定位元素位置。但是有个缺点鼠标移动到元素外面就会消失。
快捷键是 ctrl + shift + c;所以我推荐第二种方式,亲测有效

image

二、元素不消失的方法,可以方便调试

首先就是找到浏览器中的调试页面源代码source,然后找到事件监听器断点(eventListener breakpoint)找到鼠标事件(鼠标事件中也有细分的选项可以选择)选中,然后鼠标移动到对应的元素上,会自动触发,如果断点没有出来想要的页面效果就点断点的下一步选项,直到出现想要的页面效果。

这里我勾选click即可 移到元素上点击一下就会触发断点
image

标签:hover,鼠标,chrome,元素,悬浮,断点,样式,调试
From: https://www.cnblogs.com/tn666/p/17748967.html

相关文章

  • 【Flutter】如何优美地实现一个悬浮NavigationBar
    【Flutter】如何优美地实现一个悬浮NavigationBar最近写代码的时候遇到了一个如下的需求:整体来说,底部的条是一个浮动的悬浮窗,有如下的三个按钮:点击左边的要进入“主页”点击中间的按钮要进行页面跳转,能够进入“创作页”点击右边的按钮切换到“个人中心”页使用Overlay来......
  • el-button按钮hover悬停限制3秒钟调用1次函数
    使用:elementui、vue例如:鼠标悬停到按钮上显示视频拉取中,在次悬浮到上面会频繁触发,所以限制3秒显示一次提示可以使用纯JavaScript实现节流效果。以下是示例代码:在组件中定义一个变量用于存储最近一次执行函数的时间戳:exportdefault{data(){return{lastExecTime......
  • 支持复制粘贴进行翻译的chrome浏览器插件
    下载安装https://chrome.google.com/webstore/detail/translator-dictionary-acc/bebmphofpgkhclocdbgomhnjcpelbenh/related?hl=zh-CN界面设置常用语言历史记录......
  • chrome浏览器网页截图时图片“泛白”“过曝”的解决办法
    原因分析表象原因为系统显示设置里开启了HDR,所以理论上只要关闭HDR就可以解决,但是这种牺牲体验换来的解决办法总会让人纠结。HDR设置直接原因是chrome会默认匹配系统的颜色管理,但是由于截图瞬间颜色管理出错,所以出现了颜色显示不对。解决办法在chrome地址栏输入chr......
  • Go每日一库之178:chromedp(一个基于Chrome DevTools协议的库,支持数据采集、截取网页长
    该库提供了一种简单、高效、可靠的方式来控制Chrome浏览器进行自动化测试和爬取数据。项目地址:https://github.com/chromedp/chromedp它可以模拟用户在浏览器中执行各种操作,如点击、输入文本、截取网页长图、将网页内容转换成pdf文档、下载图片等,从而获取到需要采集的数据。基......
  • Chrome浏览器下载文件被自动拦截怎么办
    谷歌浏览器下载文件被自动拦截怎么办?在使用谷歌浏览器进行网络文件下载的时候,下载的文件进程被浏览器给阻止了,导致无法获取文件下载资源了。如何解除这个拦截功能呢?来看看解决方法分享吧!操作教学1、首先打开谷歌浏览器,在谷歌浏览器右上角可以看到一个由三个点组成的图标,点击该图......
  • Chrome插件manifest.json文件详解
    {//扩展名称"name":"MyExtension",//版本。由1到4个整数构成。多个整数间用"."隔开"version":"1.0",//manifest文件版本号。Chrome18开始必须为2"manifest_version":2,//描述。132个字符以内"......
  • vscode运行html文件,显示"windows找不到'chrome'文件"
     运行html文件时,弹窗报错。大部分原因是因为chrome浏览器位置不对。这时,我们只要在vscode中修改chrome路径就可以解决:1、首先我们右击chrome浏览器找到属性,并且复制目标路径 2、打开vscode,在设置中找到Liveserver,打开setting.json文件,添加上chrome文件即可(将路径中的\改......
  • 解决:npm ERR! [email protected] install: `node install.js`
    https://cdn.npmmirror.com/binaries/chromedriver/2.27/chromedriver_win32.zip可以点击这个链接直接下载。删掉项目中的node_modules文件夹。根据自己的下载地址,安装依赖。npminstallchromedriver--chromedriver_filepath=文件地址注意:不需要解压缩。npminstall......
  • H5 页面拖动悬浮按钮
    <divclass="main-plus":style="{bottom:(clientHeight*5/100)+'%'}"ref="dragBox"@click="goItem"@touchstart="touchstartHandle('dragBox',$event)"@touchmove="touchmoveHan......