css hover频繁闪烁
今天遇见一个问题。
在鼠标放上 图片上的时候。
删除图标一直不停的闪烁。
我当时觉得很奇怪,父子关系的结构
不应该闪烁呀。
看了下html和css,发现子元素(要hover)的元素是绝对定位了的
于是我就给
子元素添加了一css样似
pointer-events: none;
于是就解决了闪烁问题。
后来我去看了一下,
pointer-events: none;
很多人这样解释
如果为某个元素样式设置了“pointer-events: none ”,
这个元素的 事件、连接、悬浮样式都没有了
(1)点击a标签,不会跳转到链接地址
(2)而且也没有悬浮样式
(3)注册的事件没有任何效果
如果为div设置了“pointer-events: none ”,
相当于div只是一个虚设的东西,如同海市蜃楼,任何事件都可以轻易从它身上穿过去
参考地址:https://www.cnblogs.com/xiaonangua/p/10734573.html
pointer-events 是CSS3的一个属性,支持的值非常多,其中大部分都是和SVG有关
pointer-events: none;
意思就是让鼠标事件失效(链接、点击等事件)
常用场合:获取验证码 在2s内点击某一个元素莫得反应
引用场景:在一段时间内,点击某一个元素莫得反应。
有些时候,当我hover一个元素莫得反应时,
你可以将将元素放到 下一级上:hover
或者是兄弟关系:hover
hover肯定是可以的
css hover频繁闪烁的更多相关文章
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- CSS active选择器与CSS hover选择器
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- CSS hover
CSS hover hover 鼠标移动到当前标签上时,以下css属性才能生效 <!DOCTYPE html> <html lang="en"> <h ...
- 10个CSS+HOVER 的创意按钮
CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击.悬停的相关特效,以便大家获得更好的创造灵感. 今天我们 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。
css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...
- CSS hover box
CSS hover box transition 踩坑指南, display: none; 作为初始状态,不会产生动画效果,必须设置 height: 0; 或 width: 0; 来实现隐藏! tra ...
- css样式hover图片闪烁问题
主要是ie8及ie8以下版本浏览器会出现此问题, 问题核心是因为hover选择器没有缓存即将要替换的图片, 所以导致替换期间有一个极其短暂的空白期. 解决方案: 采用 background-posit ...
- css hover对其包含的元素进行样式设置
<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...
随机推荐
- 通过windows自带管理工具、系统命令行、快捷键等快速操作
windows自带管理工具 我们win+R 输入一些命令,可以快速打开一些界面,比如: sysdm.cpl win10.win11 我电脑,属性与之前win7不同了,我希望打开之前的属性打不开了 通过 ...
- 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0(上)
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...
- EXECL函数
1 COUNTIF 对比两列数据,有相同的即计为1 找一列空白列,输入=COUNTIF(范围,条件),按回车,然后再点击表格右下角的"+" 就可以拉动持续执行这个函数 2 CONC ...
- 基于分发与计算的GRTN全球实时传输网络
一张能同时满足「分发」与「计算」需求的网. 从直播趋势看「分发」与「计算」 阿里云直播产品架构图中,主要分为端和云两个部分:在端侧,主要包含推流端和播放端:在云侧,一是基于分布式节点构建的传输网,二是 ...
- BAPI_PO_CHANGE 采购订单修改服务
修改服务页签里面的价格和数量,达到修改净价和条件里面金额的目的 数据可以通过采购订单查询ESLH和ESLL表获取 "------------------------------------- ...
- Redis无法使用ip访问
问题: 启动redis服务,可以使用127.0.0.1配置并使用访问redis,但是换成IP地址就无法访问 127.0.0.1 可以 [root]# ./redis-cli -c -h 127 ...
- linux服务器之间免密登录
目标 192.168.0.10 免密登录 192.168.0.11.192.168.0.12两台服务器 1.登录192.168.0.10 生成ssh密钥 ssh-keygen -t r ...
- GPT应用开发:GPT插件开发指南
欢迎阅读本系列文章!我将带你一起探索如何利用OpenAI API开发GPT应用.无论你是编程新手还是资深开发者,都能在这里获得灵感和收获. 本文,我们将继续展示聊天API中插件的使用方法,让你能够轻松 ...
- qiankun 微前端实例化使用
一.qiankun使用场景 1. 简介:qiankun是在single-spa的基础上实现的,可以保证各个项目独立使用,也可以集成使用.各系统之间不受技术栈的限制,集成使用也能保证各样式和全局变量的隔 ...
- C# 加解密
1. Md5 /// <summary> /// 不可逆加密 /// 1 防止被篡改 /// 2 防止明文存储 /// 3 防止抵赖,数字签名 /// </summary> ...