如何使用hoverIntent插件？

Question

我是jQuery的新手，想把hoverIntent插件作为我的导航菜单添加到我的站点中。我已经被参考过Brian的站点并看到了要下载的代码，但是我不太清楚如何将它们放在一起才能正常工作。

有人可以在适当的hoverIntent插件代码中发布HTML代码应该是什么样子的示例吗？还是带我去看推荐信？

我会非常感激的！谢谢!

Answer 1

hoverIntent插件遵循与jQuery hover方法相同的api签名。您可以在http://cherne.net/brian/resources/jquery.hoverIntent.html获得使用示例，只需查看源代码即可。

首先，将jQuery包含在头部：

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

然后下载并包含hoverIntent插件：

<script type="text/javascript" src="path/to/jquery.hoverIntent.js"></script>

然后，您可以对任何像这样的hoverIntent()元素使用jQuery方法

$(element).hoverIntent(whatToDoWhenHover, whatToDoWhenOut);

element是一个jQuery选择器，如'#id'、'.class'或'div > .something'，whatToDoWhenHover和whatToDoWhenOut是用户开始悬停元素和停止时执行的函数。就像以前的好jQuery悬停一样。

示例

Answer 2

如果您希望在不依赖于hoverIntent的情况下使用jQuery功能，则可以使用它的Pure JavaScript ES6版本(或轻松地将其转换为es5 )。

const hoverIntent = (el, onOver, onOut) => {
    let x;
    let y;
    let pX;
    let pY;
    const h = {};
    let state = 0;
    let timer = 0;

    let options = {
        sensitivity: 7,
        interval: 100,
        timeout: 0,
        handleFocus: false,
        overClass: 'hovered'
    };

    const delay = e => {
        if (timer) timer = clearTimeout(timer);
        state = 0;
        if (onOut) {
            return onOut.call(el, e);
        }
        el.classList.remove(options.overClass);
        return false;
    };

    const tracker = e => {
        x = e.clientX;
        y = e.clientY;
    };

    const compare = e => {
        if (timer) timer = clearTimeout(timer);
        if (Math.abs(pX - x) + Math.abs(pY - y) < options.sensitivity) {
            state = 1;
            if (onOver) {
                return onOver.call(el, e);
            }
            el.classList.add(options.overClass);
            return false;
        }
        pX = x;
        pY = y;
        timer = setTimeout(() => {
            compare(e);
        }, options.interval);
        return false;
    };

    // Public methods

    const dispatchOver = e => {
        if (timer) timer = clearTimeout(timer);
        el.removeEventListener('mousemove', tracker, false);

        if (state !== 1) {
            pX = e.clientX;
            pY = e.clientY;

            el.addEventListener('mousemove', tracker, false);

            timer = setTimeout(() => {
                compare(e);
            }, options.interval);
        }

        return this;
    };

    const dispatchOut = e => {
        if (timer) timer = clearTimeout(timer);
        el.removeEventListener('mousemove', tracker, false);

        if (state === 1) {
            timer = setTimeout(() => {
                delay(e);
            }, options.timeout);
        }

        return this;
    };

    if (el) {
        el.addEventListener('mouseover', dispatchOver, false);
        el.addEventListener('mouseout', dispatchOut, false);
    }

    h.options = opt => {
        options = { ...options, ...opt };
        return h;
    };

    h.remove = () => {
        if (!el) return;
        el.removeEventListener('mouseover', dispatchOver, false);
        el.removeEventListener('mouseout', dispatchOut, false);
    };

    return h;
};

用法：

const menuEl = document.querySelector('.menu');
hoverIntent(menuEl);

这将在菜单元素中添加“悬浮”类，然后当父菜单项悬停时，可以使用普通CSS启用/禁用子下拉框。

• 提示：而不是对每个菜单项运行hoverIntent；只运行一个元素(即菜单-包装器元素)，并为父菜单项目添加简单的CSS悬停规则以显示下拉框；基于菜单包装器已经悬停或不运行，将大大提高性能；*

css将类似于；

.menu.hovered .parent-li:hover {
    background-color: #f4f4f4;
}
.menu.hovered .parent-li:hover .child {
    display: block;
}

我创建了一个操场，看现场演示：

https://codepen.io/mcakir/full/OJVJmdV

高级用法：hoverIntent方法接受onOver和onOut以及扩展options。

示例：

const onOverHandler = () => {
    console.log('mouse in!');
    // do something
}
const onOutHandler = () => {
    console.log('mouse out!');
    // do something
}
const customOptions = () => {
    sensitivity: 7,
    interval: 300,
    timeout: 200,
}
const menuEl = document.querySelector('.menu');
hoverIntent(menuEl, onOverHandler, onOutHandler).options(customOptions);