html中鼠标经过遮罩消失,CSS遮罩层:hover状态丢失及解决方案
CSS遮罩层,顾名思义就是在div上,再“铺”一层半透明的div。在hover时,亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。
CSS遮罩层实现及hover状态丢失问题
CSS代码:
.block {
position: relative;
top: 100px;
left: 100px;
display: inline-block;
width: 300px;
border-radius: 4px;
border:1px solid ;
}
.block__overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.block:hover .block__overlay {
background-color: rgba(100, 200, 0, .5);
}
Html代码:
在Mouse hover时,如果快速点击鼠标,可能会丢失mouse hover的效果。这在windows上的浏览器经常出现,造成'闪烁'。虽然在macbook上出现的时候很少。
解决方案:点击鼠标时,添加isActive 样式,强制显示'hover'里的样式。等mouse out时,去掉isActive class。
普通状态下的效果:
鼠标Hover时的效果图:
问题是,在鼠标hover的时候多次快速点击鼠标,会导致hover状态失效。这个问题在windows的浏览器(包括windows版本的Chrome, FireFox)时常发生,尽管在macOs的各种浏览器挺少发生。
Hover状态丢失的简单解决方案
基本思路是,点击鼠标时给.block添加isActive class,强制它显示Hover里的样式。在鼠标不断点击以致于丢失hover时,也会因为添加了isActive class而照样显示hover里的样式。
/*.isActive 拥有:hover相同的样式*/
.block:hover .block__overlay,
.block.isActive .block__overlay {
background-color: rgba(100, 200, 0, .5);
}
JS文件:
var block = document.getElementsByClassName("block")[0];
block.addEventListener('mouseout', function (evt) {
// mouse hover时,不断地快速点击鼠标,可能会触发mouseout事件,尽管并不是真正将鼠标move out了。
// 这里通过offsetX,offsetY来判断鼠标的位置,是否真正还在.block内
if (evt.offsetX <= 0 || evt.offsetY <= 0 || evt.offsetX >= block.offsetWidth || evt.offsetY >= block.offsetHeight) {
console.log('Really moved out');
if (this.classList.contains('isActive')) {
this.classList.remove('isActive');
}
}
}, false);
block.addEventListener('click', function (evt) {
if (!this.classList.contains('isActive')) {
this.classList.add('isActive');
}
}, false);
Hover状态丢失的通用解决方案
若.block里有多个定位元素,鼠标在子元素内部向上移动时,虽然鼠标可能依旧在.block内部,但是evt.offsetY可能是负数。依照上述简单方案判断结果是,鼠标在.block外部,就不对了。为此我们需要一种通用的方案。
以下图效果举例。我们在.block里添加一个红色⭕️和对勾
摘出HTML代码:可以看到添加了block__circle.
click to view
在鼠标从红色圆圈向上移动到圆圈外部 但仍在.block内时, offsetY是小于0的。 如果依旧应用简单方案里的js,就会错误地得出鼠标在.block外的结论。
为此我们使用toElement属性,它表示mouse移动到哪个元素。如果该元素是.block的子孙元素,我们就认为鼠标还在.block内。FireFox的event没有toElement属性,我们用getToElement函数解决。
function getToElement(evt) {
var node;
if (evt.type == 'mouseout') {
node = evt.relatedTarget;
} else if (evt.type == 'mouseover') {
node = evt.target;
}
if (!node) {
return;
}
while (node.nodeType != 1) {
node = node.parentNode;
}
return node;
}
var findElement = (function(){
var found = false;
function doFindElement(target, scope) {
if (!found && scope && scope.childElementCount > 0) {
for (var i=0; i< scope.childElementCount; i++) {
var child = scope.children[i];
if (target == child) {
found = true;
return;
} else if (child.childElementCount > 0) {
doFindElement(target, child, found)
}
}
}
}
return function (target, scope) {
found = false;
doFindElement(target, scope);
return found;
};
})();
var block = document.getElementsByClassName("block")[0];
block.addEventListener('mouseout', function (evt) {
var toElement = evt.toElement || getToElement(evt) || evt.srcElement;
if (toElement == this || findElement(toElement, this)) {
console.log('Does NOT really move out');
} else {
console.log('Really moved out');
if (this.classList.contains('isActive')) {
this.classList.remove('isActive');
}
}
/***
* The below code: the old way no long works correctly, because offsetX, offsetY rely on fromElement.
* When mouse move up direction out of 'circle', the OffsetY could be negative, but mouse
* is still inside the outermost .block.
*/
/*
if (evt.offsetX <= 0 || evt.offsetY <= 0 || evt.offsetX >= block.offsetWidth || evt.offsetY >= block.offsetHeight) {
console.log('OLD way: Really moved out');
if (this.classList.contains('isActive')) {
this.classList.remove('isActive');
}
} else {
console.log('OLD way: Doest NOT move out');
}*/
}, false);
block.addEventListener('click', function (evt) {
if (!this.classList.contains('isActive')) {
this.classList.add('isActive');
}
}, false);
控制台查看鼠标点击.block div后的class:
鼠标移走之后,.block div的class:
总结
本文介绍了CSS遮罩的简单实现,以及在鼠标点击.block时如何保持遮罩层的hover 状态。具体代码可查看 https://github.com/JackieGe/a...
html中鼠标经过遮罩消失,CSS遮罩层:hover状态丢失及解决方案相关推荐
- CSS遮罩层:hover状态丢失及解决方案
CSS遮罩层,顾名思义就是在div上,再"铺"一层半透明的div.在hover时,亦可进一步改变该遮罩层的色彩和透明度.我们可以通过css定位和背景色实现. CSS遮罩层实现及ho ...
- css中的伪类on,【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...
- css一元素hover状态控制另一元素显现
.delIndex { //目标元素默认不显现display: none; } .historyPanel:hover .delIndex { //对目标元素的父标签添加hover状态,控制目标元素显 ...
- css中鼠标变成手型设置
css中鼠标变成手型设置 不需要:hover选择 主要依赖cursor属性,对应的设置值如下: default:标准箭头 //这是默认的样式 pointer:手形光标 wait :等待光标 text: ...
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- ZBrush中如何做不同图案的遮罩
ZBrush®软件中不仅可以创建矩形遮罩还可以创建有图案的遮罩,且是非常简单有效的,那么究竟怎样做出神奇的效果,本文将为您详细讲解. 有关反转遮罩.清除遮罩的详细内容,请点击:ZBrush中如何反选遮 ...
- html中鼠标左键自定义多级菜单,CSS多级菜单的实现代码
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单.实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧. 先来一个非常简单的一级菜单与悬停效果. 菜单一 菜单 ...
- html5页面中鼠标悬停效果,CSS实例:非常不错的鼠标悬停TIP效果!_div+css布局教程...
在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...
- html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
最新文章
- python一次性读取整个文件-python逐行读取文件内容的三种方法
- 【Python】Github上125k+Star的Python算法资料
- leetcode哈希表(python与c++)
- 天猫公布618战报 苹果2分45秒破亿 你贡献了多少?
- pytorch 归一化_用PyTorch进行语义分割
- 从入门到入土:基于Python实现百度查询返回结果真实url读取及域名读取
- hdu-5495 LCS(置换)
- Latex安装教程(附美赛论文latex模板)
- LaTex符号大全(LaTeX_Symbols)
- 老司机用CATIA的实用默认值更改
- 获得android手机root权限,安卓手机root助手教你一键获取手机root权限
- 允许用户把若干个作业提交给计算机,允许多个用户将若干个作业提交给计算机系统集中处理的操作系统称为( )。...
- UFS Hibernate介绍--代码部分
- Linux sdkman使用方法
- 青海国家沙漠公园分布及功能区划
- java根据年份获取年份下的所有月份
- maven BUILD FAILURE的解决办法
- app营销变现系统,让你的app更值钱!
- windos10系统ISO直装与PE两种方法教程
- JavaScript倒计时算法(计算剩余多少天)实现