Question

我是jQuery的新手，想要将hoverintent插件添加到我的网站作为我的导航菜单。我被提到Brian Cherne的网站并看到要下载的代码，但我不太确定如何将它们放在一起以使其工作。有人可以使用添加的相应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>

然后你可以在任何像这样的jQuery元素上使用hoverIntent()方法

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

element是一个jQuery selector，例如'#id'或'.class'或'div > .something'，whatToDoWhenHover和whatToDoWhenOut是函数，当用户开始悬停元素并停止时执行。就像旧的jQuery hover一样。

Example

Answer 2

如果希望在不依赖jQuery的情况下使用hoverIntent功能，则可以使用它的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);

这会将“ hovered”类添加到菜单元素，然后当您将父菜单项悬停时，可以使用纯CSS启用/禁用child-dropdown-box

提示：而不是为每个菜单项运行hoverIntent；仅对1个元素（即menu-wrapper元素）运行它，并为parent-menu-items元素添加简单的CSS悬停规则以显示下拉框；基于menu-wrapper的鼠标已经或没有悬停，将会提高性能；）*

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

如何实现hoverintent插件

2 个答案: