<p>CSS遮罩层，顾名思义就是在div上，再“铺”一层半透明的div。在hover时，亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。</p>    <h2>CSS遮罩层实现及hover状态丢失问题</h2>    <p>CSS代码：</p>    <pre>  <code class="language-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);          }</code></pre>    <p>Html代码：</p>    <pre>  <code class="language-css"><div class="block">      <p>          在Mouse hover时，如果快速点击鼠标，可能会丢失mouse hover的效果。这在windows上的浏览器经常出现，造成'闪烁'。虽然在macbook上出现的时候很少。      </p>      <p>          解决方案：点击鼠标时，添加isActive 样式，强制显示'hover'里的样式。等mouse out时，去掉isActive class。      </p>      <div class="block__overlay">      </div>    </div></code></pre>    <p>普通状态下的效果：</p>    <p><img src="https://simg.open-open.com/show/64eb9e735da7bf3572e263b848f736f0.png"></p>    <p>鼠标Hover时的效果图：</p>    <p><img src="https://simg.open-open.com/show/d7d7dfb8e8c21af3f73d208575829963.png"></p>    <p>问题是，在鼠标hover的时候多次快速点击鼠标，会导致hover状态失效。这个问题在windows的浏览器（包括windows版本的Chrome， FireFox）时常发生，尽管在macOs的各种浏览器挺少发生。</p>    <h2>Hover状态丢失的简单解决方案</h2>    <p>基本思路是，点击鼠标时给div添加isActive class，强制它显示Hover里的样式。在鼠标不断点击以致于丢失hover时，也会因为添加了isActive class而照样显示hover里的样式。</p>    <pre>  <code class="language-css">/*.isActive 拥有:hover相同的样式*/    .block:hover .block__overlay,          .block.isActive .block__overlay {              background-color: rgba(100, 200, 0, .5);          }</code></pre>    <p>JS文件：</p>    <pre>  <code class="language-css">var block = document.getElementsByClassName("block")[0];      block.addEventListener('mouseout', function (evt) {          // mouse hover时，不断:ideograph_advantage:️快速点击鼠标，可能会触发mouseout事件，尽管并不是真正将鼠标move out了。          // 这里通过offsetX，offsetY来判断鼠标的位置，是否真正还在div内          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);</code></pre>    <h2>Hover状态丢失的通用解决方案</h2>    <p>若div里有多个定位元素，鼠标在子元素内部向上移动时，虽然鼠标可能依旧在div内部，但是evt.offsetY可能是负数。依照上述简单方案判断结果是，鼠标在div外部，就不对了。为此我们需要一种通用的方案。</p>    <p>以下图效果举例。我们在div里添加一个红色:o:️和对勾</p>    <p><img src="https://simg.open-open.com/show/04ae2a6cdb6a1d4205aec06129ca08b4.png"></p>    <p>CSS代码：</p>    <pre>  <code class="language-css">.block {              position: relative;              top: 100px;              left: 100px;              display: inline-block;              width: 300px;              border: 1px solid;              border-radius: 4px;          }            .block__overlay {              position: absolute;              top: 0;              left: 0;              width: 100%;              height: 100%;              background-color: rgba(0, 0, 0, .3);          }            .block:hover .block__overlay,          .block.isActive .block__overlay {              background-color: rgba(100, 200, 0, .5);          }            .block__circle {              position: absolute;              top: 50%;              left: 50%;              transform: translate(-50%, -50%);                width: 40px;              height: 40px;              border: 8px solid red;              border-radius: 50%;          }            .block__circle::after {              content: '';              position: absolute;              top: 2px;              left: 9px;              width: 15px;              height: 25px;              border: 4px solid #eef;              border-top: none;              border-left: none;              -webkit-transform: rotate(30deg);              -moz-transform: rotate(30deg);              -ms-transform: rotate(30deg);              -o-transform: rotate(30deg);              transform: rotate(30deg);          }</code></pre>    <p>HTML代码：可以看到添加了block__circle.</p>    <pre>  <code class="language-css"><div class="block">      <p>          在Mouse hover时，如果快速点击鼠标，可能会丢失mouse hover的效果。这在windows上的浏览器经常出现，造成'闪烁'。虽然在macbook上出现的时候很少。      </p>      <p>          解决方案：点击鼠标时，添加isActive 样式，强制显示'hover'里的样式。等mouse out时，去掉isActive class。      </p>      <div class="block__overlay">      </div>        <div class="block__circle">      </div>  </div></code></pre>    <p>在鼠标从红色圆圈向上移动到圆圈外部 但仍在div内时，offsetY是小于0的。 如果依旧应用简单方案里的js，就会错误地得出鼠标在div外的结论。</p>    <p>为此我们使用toElement属性，它表示mouse移动到哪个元素。如果该元素是div的子孙元素，我们就认为鼠标还在div内。FireFox的event没有toElement属性，我们用getToElement函数解决。</p>    <pre>  <code class="language-css">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;      }        HTMLElement.prototype.isChildOf = function (elem) {          if (elem && elem.children) {              for (var i = 0; i < elem.childElementCount; i++) {                  var child = elem.children[i];                  if (child == this) {                      return true;                  } else if (child.childElementCount > 0) {                      return this.isChildOf(child);                  }              }          }          return false;      }        var block = document.getElementsByClassName("block")[0];      block.addEventListener('mouseout', function (evt) {            var toElement = evt.toElement || getToElement(evt);          if (toElement == this || toElement.isChildOf(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 div.           */            /*          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);</code></pre>    <p>控制台查看鼠标点击div后的class：</p>    <p><img src="https://simg.open-open.com/show/568a64b6ef9114a1243069947f728cf8.png"></p>    <p>鼠标移走之后，div的class：</p>    <p><img src="https://simg.open-open.com/show/0b246ab6859a857f2e5fabcca4e6a439.png"></p>    <h2>总结</h2>    <p>本文介绍了CSS遮罩的简单实现，以及在鼠标点击div时如何保持遮罩层的hover 状态。具体代码可查看 <a href="/misc/goto?guid=4959751486719106985" rel="nofollow,noindex">https://github.com/JackieGe/a...</a></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000010748472</p>    <p> </p>