Jquery 如何使用hoverIntent插件？

我是jQuery新手，希望将hoverIntent插件作为导航菜单添加到我的站点。我已经参考了Brian Cherne的，并看到了要下载的代码，但我不太确定如何将所有这些放在一起使其工作

是否有人可以发布一个示例，说明添加了适当的hoverIntent插件代码后HTML代码应该是什么样子？或者让我参考一下推荐人

---

我将非常感激！谢谢

hoverIntent

插件遵循jQuery

hover

方法的相同api签名。 您可以在上获得使用示例，只需查看源代码

首先，将jQuery包含到头部：

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

元素

类似于

'#id'

或

'.class'

或

'div>。something'

、

whatToDoWhenHover

和

whatToDoWhenOut

是当用户开始悬停元素和停止时将执行的函数。就像老好人一样

---

如果希望在不依赖jQuery的情况下使用hoverIntent功能，可以使用它的纯JavaScript ES6版本（或者轻松地将其转换为es5）

这将向菜单元素添加“hovered”类，然后当父菜单项悬停时，您可以使用纯CSS来启用/禁用子下拉框

• 提示：而不是为每个菜单项运行hoverIntent；仅为1个元素（即：菜单包装器元素）运行它，并为父菜单项元素添加简单的CSS悬停规则以显示下拉框；基于菜单包装器是否已被悬停，将大大提高性能效率；）*

css将类似于

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

我创建了一个游乐场，请看现场演示：

高级用法：

hoverIntent

方法接受

onOver

和

onOut

以及要扩展的

选项

例如：

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

---

很抱歉，我还没有对jQuery有基本的了解，所以当涉及到提供的代码时，我就不知所措了。我知道我应该使用代码，我只是不知道应该把它放在哪里。谢谢这个例子。我想我还是不知道该怎么做-/谢谢你给我解释清楚。我很感激。我应该把这段代码放在哪里$（要素）。悬停意图（whatToDoWhenHover，whatToDoWhenOut）；我现在还没有，但是我比开始的时候走得更远了，所以谢谢你。如果我想通过创建列表创建菜单，我是否插入

作为元素？我假设Cherne的代码中更详细地解释了WhatToWhenHover和WhatToWhenOut？是的，即使这不是最佳实践，它也会起作用。如果您有疑问，请查看hoverIntent页面的源代码或我在JSFIDLE上的示例，这与在Firefox中按CTRL+U一样简单。阅读他人编写的网页源代码是学习如何使用html+js的最好方法

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

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

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