摘要：在時(shí)，亦可進(jìn)一步改變?cè)撜谡謱拥纳屎屯该鞫取Ｕ谡謱訉?shí)現(xiàn)及狀態(tài)丟失問題代碼代碼在時(shí)，如果快速點(diǎn)擊鼠標(biāo)，可能會(huì)丟失的效果。狀態(tài)丟失的簡(jiǎn)單解決方案基本思路是，點(diǎn)擊鼠標(biāo)時(shí)給添加，強(qiáng)制它顯示里的樣式。

CSS遮罩層，顧名思義就是在div上，再“鋪”一層半透明的div。在hover時(shí)，亦可進(jìn)一步改變?cè)撜谡謱拥纳屎屯该鞫取Ｎ覀兛梢酝ㄟ^css定位和背景色實(shí)現(xiàn)。

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時(shí)，如果快速點(diǎn)擊鼠標(biāo)，可能會(huì)丟失mouse hover的效果。這在windows上的瀏覽器經(jīng)常出現(xiàn)，造成"閃爍"。雖然在macbook上出現(xiàn)的時(shí)候很少。
    
    

        解決方案：點(diǎn)擊鼠標(biāo)時(shí)，添加isActive 樣式，強(qiáng)制顯示"hover"里的樣式。等mouse out時(shí)，去掉isActive class。
    
    
    
    

    

普通狀態(tài)下的效果：

鼠標(biāo)Hover時(shí)的效果圖：

問題是，在鼠標(biāo)hover的時(shí)候多次快速點(diǎn)擊鼠標(biāo)，會(huì)導(dǎo)致hover狀態(tài)失效。這個(gè)問題在windows的瀏覽器（包括windows版本的Chrome， FireFox）時(shí)常發(fā)生，盡管在macOs的各種瀏覽器挺少發(fā)生。

基本思路是，點(diǎn)擊鼠標(biāo)時(shí)給.block添加isActive class，強(qiáng)制它顯示Hover里的樣式。在鼠標(biāo)不斷點(diǎn)擊以致于丟失hover時(shí)，也會(huì)因?yàn)樘砑恿薸sActive 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時(shí)，不斷地快速點(diǎn)擊鼠標(biāo)，可能會(huì)觸發(fā)mouseout事件，盡管并不是真正將鼠標(biāo)move out了。
        // 這里通過offsetX，offsetY來判斷鼠標(biāo)的位置，是否真正還在.block內(nèi)
        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);

若.block里有多個(gè)定位元素，鼠標(biāo)在子元素內(nèi)部向上移動(dòng)時(shí)，雖然鼠標(biāo)可能依舊在.block內(nèi)部，但是evt.offsetY可能是負(fù)數(shù)。依照上述簡(jiǎn)單方案判斷結(jié)果是，鼠標(biāo)在.block外部，就不對(duì)了。為此我們需要一種通用的方案。

以下圖效果舉例。我們?cè)?block里添加一個(gè)紅色??和對(duì)勾

CSS代碼較多，請(qǐng)參考：https://github.com/JackieGe/a...

摘出HTML代碼：可以看到添加了block__circle.

    
    

    

    

        
        
    
    
        click to view
    

在鼠標(biāo)從紅色圓圈向上移動(dòng)到圓圈外部 但仍在.block內(nèi)時(shí), offsetY是小于0的。 如果依舊應(yīng)用簡(jiǎn)單方案里的js，就會(huì)錯(cuò)誤地得出鼠標(biāo)在.block外的結(jié)論。
為此我們使用toElement屬性，它表示mouse移動(dòng)到哪個(gè)元素。如果該元素是.block的子孫元素，我們就認(rèn)為鼠標(biāo)還在.block內(nèi)。FireFox的event沒有toElement屬性，我們用getToElement函數(shù)解決。

 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);

控制臺(tái)查看鼠標(biāo)點(diǎn)擊.block div后的class：

鼠標(biāo)移走之后，.block div的class：

本文介紹了CSS遮罩的簡(jiǎn)單實(shí)現(xiàn)，以及在鼠標(biāo)點(diǎn)擊.block時(shí)如何保持遮罩層的hover 狀態(tài)。具體代碼可查看 https://github.com/JackieGe/a...