鼠标一离开，div神秘消失！教你巧妙搞定

你们知道怎么让鼠标离开一个div时它自动消失不？这个玩法妙趣横生，咱们一起试试！

首先，我得告诉你单靠div自己是搞不定onblur这个事儿的。让它消失？那可真是梦里见到了！别太灰心，这里还是有别的办法滴！比如说，试试onmouseout这类事件呗。但是，运用onmouseout也可能会出问题你想想看，如果你的按钮和弹出来的div隔着老远，当你一动鼠标就会立马触发onmouseout事件，这多无聊呀。所以嘞，咱们要特别留神！

这题有点难，不过别急，我有个好办法！你能不能把防抖动、鼠标离开还有悬停这几项功能合起来，搞出个超帅的模糊效果？再告诉你个秘密，我刚找到了个神奇法子！只需要设定div的tabindex属性，轻轻松松就搞定了，根本不用太复杂的代码！（友情提示：我亲身体验过，感觉很好用，而且能大大降低失误率呀。）

咱们来说说为啥那个div忽然消失？怎么搞它回来其实有很多方法的，具体要看你现在遇到的问题是什么，再动脑筋选合适的办法！记住，解决问题得考虑到实际情况！

    /**
     *鼠标移动过div事件
     */
    function moveOverEvent(ele,outTimer) {
        let overTimer = null;
        return function(){
            clearTimeout(outTimer);     //div没有消失的情况下，在移动进来div，那么就清除上次移出的事件
            clearTimeout(overTimer);    //防抖
            overTimer = setTimeout(()=>{        
                ele.style.display = "block";
            },500);                     
        }
    }
    /**
     * 鼠标移出
     */
    function moveOutEvent(ele,outTimer) {
        return function(){
            clearTimeout(outTimer);         //防抖
            outTimer = setTimeout(()=>{     //移动出去后等500ms，在消失这div
                ele.style.display = "none";
            },500);
        }
    }

没错！就是要找个特别适合自己的办法，让那个div在失去焦点时自然地消失掉！大家勇敢地试试看，找到那种体验最好的方式就行！

再说说这个Div到底会不会消失？别老想着功能，用户可是最重要滴！所以，在写代码时要注意每个小细节，千万别忽略了让用户看得舒心用得爽这件大事儿～

找答案可不是件容易事儿呀!别急别慌，耐心点儿，只要你真心想弄明白，肯定会找到答案的。所以，我建议，咱们做编程的时候应该有点创新思维，试试用一些新颖巧妙的方法来解决问题。

//设置了tabindex后，元素默认加虚线，通过ouline=0进行去除(IE设置hidefocus="true")

哇，总算明白了！其实，只需要搞懂放大镜（防抖）、鼠标滑过（onmouseout、onmouseover）以及给div加上键盘索引（tabindex）这些小技巧，咱们就可以搞定一个超赞的模糊效果！焦点一离开，这个div马上就消失不见，真的好酷！希望这个小秘密能帮到大伙儿。今天的分享就到这里！希望大家都能喜欢我的写作，有所收获。有啥疑问或感想随时告诉我别忘了给我点赞还得分享个给小伙伴们下次再聊喽！