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)& ...
随机推荐
- storybook添加全局样式与sass全局变量设置
storybook组件需要全局样式,只需在.storybook/preview.js 增加全局样式即可. import '../src/style/index.scss'; export const ...
- P1379 八数码难题 ( A* 算法 与 IDA_star 算法)
P1379 八数码难题 题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初 ...
- Codeforces Round #663 (Div. 2) (A~C题,C题 Good)
比赛链接:Here 1391A. Suborrays 简单构造题, 把 \(n\) 放最前面,接着补 \(1\) ~ \(n - 1\) 即可 1391B. Fix You \((1,1)\) -&g ...
- 2021杭电多校第零场 & 2021湘潭全国邀请赛 补题记录
比赛链接:Here 本场题目重现于 2021湘潭全国邀请赛 A - A+B Problem (签到) 根据题意处理即可 int main() { cin.tie(nullptr)->sync_w ...
- 【每日一题】25.「火」皇家烈焰 (字符串DP)
补题链接:Here 转移方程的具体含义我在代码注释里写出来了, 很好理解 这道题的难点在于如何表示状态, 一旦找到状态表示方法 只要根据题意做转移就行了 最后的答案就是 \(dp[n][0][0] + ...
- Educational Codeforces Round 104 (Rated for Div. 2) A-E 个人题解
比赛链接 1487A. Arena n 个 Hero,分别有 \(a_i\) 的初始等级.每次两个 Hero 战斗时:等级相同无影响,否则等级高的英雄等级+1.直到某个英雄等级到了 \(100^{50 ...
- 三、springboot集成达梦
1.数据库中创建表 1.数据库中创建表 CREATE TABLE TEST_BLOCK_T ( BLOCK_ID VARCHAR2(10 BYTE) PRIMARY KEY, --编码 BLOCK_N ...
- 本地存储sessionStorage、localStorage
本地存储特性 数据存储在用户浏览器中 设置.读取方便.甚至页面刷新不丢失数据 容量较大,sessionStorage约5M.localStorage约20M 只能存储字符串,可以将对象JSON.str ...
- [Qt开发/毕业设计/求职项目]局域网环境下远程文件发送部署系统-服务端、客户端双端的讲解
写在前面 本文旨在做一个简单的代码讲解,我会给出源码,然后整个代码的讲解都在源码的基础上进行. 代码可能会随着更新而进行修改,但是整体框架变化不会太大. 整个文章内容不会太多,算是我自己的一个复盘,整 ...
- shell脚本(7)-shell运算
文档目录: 一.算数运算符 二.关系运算符 三.布尔运算符 四.逻辑运算符 五.字符串运算符 六.文件测试运算符 算术运算符 下表列出了常用的算术运算符,假定变量 a 为 10,变量 b 为 20: ...