Hover 悬浮延时

简介

CSS的延时操作通常使用hover，原生js的延时操作通常使用mouseover+mouseout和mouseenter+mouseleave，jQuery使用hover()方法；但是这三个方法要么不够灵敏，要么产生冒泡情况，要么随着鼠标移入移出而反复执行一个事件。本框架使用axHover插件来执行悬浮延时事件。

axHover

axHover主要是解决两个问题：

一是判断是误操作还是刻意操作。当鼠标快速经过目标时应该被当做误触发而不执行任何mouseenter或mouseover事件；当鼠标缓慢经过目标则应该视为有意识的去触发mouseenter或mouseover事件。

二是离开目标后是依然保持enter状态。比如进入目标后显示一个外围的Dom，当鼠标快速移动到这个Dom，那么应该保持Dom的显示状态。

axHover是一个class类，需要使用new关键字创造实例。完整写法：new axHover(elem,options)，参数说明如下：

elem：必填项，可以填"#id"、".className"、"div"等原生选择器以及Dom对象
options：必填项，具体的参数如下：

timeout：鼠标离开按钮后多久事件恢复初始状态，单位毫秒，默认50
interval：在按钮上移动是检查光标坐标的间隔时间，单位毫秒，默认50。该值越小越容易触发，越大越不容易触发；因为检查间隔时间长了，光标滑动的距离自然就长了，如果大于了threshold就不会触发的。
threshold：触发阈值，无单位，默认7，在按钮上interval时间内移动直线距离小于该值才会触发enter事件。该值越大越容易触发，越小越不容易触发；因为阈值大，所以比较容易让移动距离小于阈值，也就容易触发。
enter：进入元素后执行的事件，是一个函数，例如function(){}
leave：离开元素后执行的事件，是一个函数，例如function(){}
hold：选填项，让其他元素保持enter状态，可以填"#id"、".className"、"div"等原生选择器以及Dom对象

举例：new axHover('#demo', {enter:function(){console.log('进入了')},leave:function(){console.log('离开了')}})

显示隐藏

显示隐藏中国！

HTML JS CSS

                                            <a href="###" class="ax-btn hover" inhover>显示隐藏<span>中国！</span></a>

                                            new axHover("#inhover", {
                                                enter: function () {
                                                    this.targetDom.querySelector('span').style.display = 'block'
                                                },
                                                leave: function () {
                                                    this.targetDom.querySelector('span').style.display = 'none'
                                                }
                                            })

                                            .hover span {
                                                padding: 0 1.4rem;
                                                border: 1px solid #ebebeb;
                                                border-radius: .3rem;
                                                background-color: #fff;
                                                position: absolute;
                                                left: 0;
                                                top: calc(100% + .8rem);
                                                display: none;
                                            }

在enter和leave函数内可使用如下变量：

this.targetDom：移动目标对象的节点
this.hold：保持状态对象的节点
this.options：实例的参数

阈值

如果希望提高执行enter事件的灵敏度（提高触发enter事件概率），那么可将threshold值设高一些；如果希望降低灵敏度（降低触发enter事件概率），将threshold值设低一些；threshold默认值是7。

对于下面三个例子，可尝试让鼠标用不同速度经过按钮，对比灵敏度。

默认阈值7中国！很灵敏，阈值20中国！不灵敏，阈值1中国！

HTML JS CSS

                                    <a href="###" class="ax-btn hover" id="sen7">默认灵阈值7<span>中国！</span></a>
                                    <a href="###" class="ax-btn hover" id="sen20">很灵敏，阈值20<span>中国！</span></a>
                                    <a href="###" class="ax-btn hover" id="sen1">不灵敏，阈值1<span>中国！</span></a>

                                            new axHover("#sen7", {
                                                threshold: 7,
                                                enter: function () {
                                                    this.targetDom.querySelector('span').style.display = 'block'
                                                },
                                                leave: function () {
                                                    this.targetDom.querySelector('span').style.display = 'none'
                                                }
                                            })
                                            new axHover("#sen20", {
                                                threshold: 20,
                                                enter: function () {
                                                    this.targetDom.querySelector('span').style.display = 'block'
                                                },
                                                leave: function () {
                                                    this.targetDom.querySelector('span').style.display = 'none'
                                                }
                                            })
                                            new axHover("#sen1", {
                                                threshold: 1,
                                                enter: function () {
                                                    this.targetDom.querySelector('span').style.display = 'block'
                                                },
                                                leave: function () {
                                                    this.targetDom.querySelector('span').style.display = 'none'
                                                }
                                            })

                                            .hover span {
                                                padding: 0 1.4rem;
                                                border: 1px solid #ebebeb;
                                                border-radius: .3rem;
                                                background-color: #fff;
                                                position: absolute;
                                                left: 0;
                                                top: calc(100% + .8rem);
                                                display: none;
                                            }

保持状态

使用hold参数可以让某Dom保持enter状态，典型的用法是：当显示隐藏的元素并不在按钮内部，如果不使用hold参数，当鼠标移开按钮会自动隐藏该元素；如果使用hold参数后，当鼠标迅速移开按钮并迅速进入该元素，那么该元素依然保持显示状态（enter状态）。

迅速移入气泡看看，还在！迅速移入气泡看看，消失！

稳定的中国！

消失的美国！

HTML JS CSS

                                            <a href="###" class="ax-btn" id="hold">迅速移入气泡看看，还在！</a>
                                            <a href="###" class="ax-btn" id="nohold">迅速移入气泡看看，消失！</a>
                                            <div class="out" id="holdcon">稳定的中国！</div>
                                            <div class="out" id="noholdcon">消失的美国！</div>

                                            new axHover("#hold", {
                                                enter: function () {
                                                    document.querySelector('#holdcon').style.display = 'block';
                                                },
                                                leave: function () {
                                                    document.querySelector('#holdcon').style.display = 'none'
                                                },
                                                hold:'#holdcon',
                                            })
                                            new axHover("#nohold", {
                                                enter: function () {
                                                    document.querySelector('#noholdcon').style.display = 'block';
                                                },
                                                leave: function () {
                                                    document.querySelector('#noholdcon').style.display = 'none'
                                                },
                                            })

                                            .out {
                                                margin:.8rem 0;
                                                padding: 0 1.4rem;
                                                border: 1px solid #ebebeb;
                                                border-radius: .3rem;
                                                background-color: #fff;
                                                display: none;
                                            }