国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS遮罩層:hover狀態丟失及解決方案

Steven / 1410人閱讀

摘要:在時,亦可進一步改變該遮罩層的色彩和透明度。遮罩層實現及狀態丟失問題代碼代碼在時,如果快速點擊鼠標,可能會丟失的效果。狀態丟失的簡單解決方案基本思路是,點擊鼠標時給添加,強制它顯示里的樣式。

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里添加一個紅色??和對勾

CSS代碼較多,請參考:https://github.com/JackieGe/a...

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

在鼠標從紅色圓圈向上移動到圓圈外部 但仍在.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...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112420.html

相關文章

  • CSS罩層hover狀態丟失解決方案

    摘要:在時,亦可進一步改變該遮罩層的色彩和透明度。遮罩層實現及狀態丟失問題代碼代碼在時,如果快速點擊鼠標,可能會丟失的效果。狀態丟失的簡單解決方案基本思路是,點擊鼠標時給添加,強制它顯示里的樣式。 CSS遮罩層,顧名思義就是在div上,再鋪一層半透明的div。在hover時,亦可進一步改變該遮罩層的色彩和透明度。我們可以通過css定位和背景色實現。 CSS遮罩層實現及hover狀態丟失問題 ...

    vincent_xyb 評論0 收藏0
  • 支持多框架的組件庫KPC 1.0正式發布

    摘要:自從年月份對外公布以來,已經經過了個月的迭代,期間發布了幾十個正式版本,但一直沒有到,因為我們覺得是個里程碑版本,我們必須做的足夠完善才敢稱之為。 自從17年11月份對外公布以來,KPC已經經過了8個月的迭代,期間發布了幾十個正式版本,但一直沒有到1.0,因為我們覺得1.0是個里程碑版本,我們必須做的足夠完善才敢稱之為1.0。而如今我們有信心對外宣布:KPC 1.0終于來了! 其實距離...

    劉厚水 評論0 收藏0
  • HTML 練習實現罩層

    Title .left{ float: left; } .clearfix:after{ content: .; display: block; clear: both; visibility: hidden; ...

    harriszh 評論0 收藏0
  • 2017-08-20 前端日報

    摘要:前端日報精選數組所有全解密原生實現最簡單的圖片懶加載譯如何抓取數據中種常見的內存泄露陷阱內部原理,第一部分基礎渲染前端國際化中文深入理解筆記模塊掘金譯熱的冷的掘金模塊,桌面端的支付請求,和迷津欲有問遮罩層狀態丟失及解決方案全 2017-08-20 前端日報 精選 JavaScript數組所有API全解密原生JS實現最簡單的圖片懶加載【譯】React如何抓取數據JavaScript 中 ...

    molyzzx 評論0 收藏0

發表評論

0條評論

Steven

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<