chrome中如何查看元素的hover事件

一、总结

一句话总结:

Elements->Styles里面可以看到":hov":点开选择":hover"就可以看到元素hover时的样式了

二、chrome 开发者工具,查看元素 hover 样式

转自或参考:chrome 开发者工具,查看元素 hover 样式
https://www.cnblogs.com/similar/p/8496610.html

在web开发中,浏览器开发者工具是我们常用的调试工具。我们经常会有这样的需求,就是查看元素的时候需要查看它的hover样式。相信有很多小伙伴都遇到过这样的情形,始终选不中hover后的元素状态。其实在开发者工具中是有地方可以设置的。方法如下:

1. 打开开发者工具,选中一个元素,结果如下图:

2. 在上图中的 Filter 栏中点击 :hov 按钮,如下图:

3. 点击 :hov 按钮后会显示一系列状态的复选框,我们要查看 hover 状态下的样式,那么就将 :hover 复选框选中即可, 如下图:

酱,我们想要查看的 hover 样式出来了。其他状态也是一样的操作啦,勾选就行了 ~~~~

 

chrome中如何查看元素的hover事件的更多相关文章

  1. jQuery中多个元素的Hover事件

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...

  2. bootstrap中的dropdown组件扩展hover事件

    bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap ...

  3. Chrome中实时查看.md文件

    经常用Vim的朋友,在Vim中有一个Markdown语法高亮的插件,叫做:vim-markdown ,用起来还不错. 在Chrome中有一个实时预览Markdown效果的扩展,叫做:Markdown ...

  4. JQuery中动态生成元素的绑定事件(坑死宝宝了)

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  5. 章节八、3-如何用Chrome开发者工具查看元素

    一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...

  6. jquery 如何给新生成的元素绑定 hover事件?

    $("table tr").live({    mouseenter:    function()    {       //todo    },    mouseleave:   ...

  7. JavaScript例子1-给网页中所有<p>元素添加onclick事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

  9. jquery hover事件只触发一次动画

    最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":& ...

随机推荐

  1. LeetCode:180.连续出现的数字

    题目链接:https://leetcode-cn.com/problems/consecutive-numbers/ 题目 编写一个 SQL 查询,查找所有至少连续出现三次的数字. +----+--- ...

  2. 【转】axios用post提交的数据格式

    本文链接:https://blog.csdn.net/wopelo/article/details/78783442vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vu ...

  3. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  4. Marketing Cloud demo环境和API使用方法说明

    version 1.0 作者:Wang Jerry 更多问题请联系我 demo 系统url:https:/jerry.hybris.com/sap/bc/ui5_ui5/ui2/ushell/shel ...

  5. Java和操作系统交互(Java 代码是怎么执行)(转)

    结合 CPU 理解一行 Java 代码是怎么执行的 根据冯·诺依曼思想,计算机采用二进制作为数制基础,必须包含:运算器.控制器.存储设备,以及输入输出设备,如下图所示. 我们先来分析 CPU 的工作原 ...

  6. Nginx配置客户端SSL双向认证

    对于 NGINX 的 HTTPS 配置,通常情况下我们只需要实现服务端认证就行,因为浏览器内置了一些受信任的证书颁发机构(CA),服务器端只需要拿到这些机构颁发的证书并配置好,浏览器会自己校验证书的可 ...

  7. PXC集群信息查询

    目录 PXC集群信息查询 pxc流量控制 PXC节点状态 PXC集群状态 节点与集群的相关信息 PXC集群事务相关信息 PXC集群信息查询 show status like "%wsrep% ...

  8. [USACO14OPEN]GPS的决斗Dueling GPS's

    题目概况 题目描述 给你一个\(N\)个点的有向图,可能有重边. 有两个\(GPS\)定位系统,分别认为经过边\(i\)的时间为\(P_i\),和\(Q_i\). 每走一条边的时候,如果一个系统认为走 ...

  9. Layui 内置方法 - layer.prompt_(输入层)

    prompt的参数也是向前补齐的.options不仅可支持传入基础参数,还可以传入prompt专用的属性.当然,也可以不传,yes携带value 表单值index 索引elem 表单元素. promp ...

  10. 一个列表实现__iter__和__next__方法的例子

    x = ['厉智','陈培昌','程劲','徐晓冬'].__iter__() #这非得这么写不可,否则无法调用下面的__next__()方法,切记! print(x.__next__()) print ...