使用 JQuery 悬停项目答案

【问题标题】：Hover Item with JQuery使用 JQuery 悬停项目
【发布时间】：2009-12-30 23:54:44
【问题描述】：

有没有办法使用 javascript 来悬停元素？我不想创建另一个类，我只想在我的鼠标指针不在该元素上时使元素悬停在 javascript 上。

例如，我有 5 个具有相同类的元素，当其中一个元素实际悬停时，我想在所有元素上调用悬停。

【问题讨论】：

“悬停项目”到底是什么意思？让它看起来不一样？

标签： javascript jquery hover

【解决方案1】：

我假设您的意思是与链接关联的伪类:hover（例如）。当您将鼠标悬停在该链接上时，您希望调用所有其他链接的 :hover 样式。

不幸的是，您不能从 jQuery 调用 :hover 样式，这需要您将鼠标指针实际移动到该元素上。您必须使用类并利用 jQuery 的悬停事件。

【讨论】：

【解决方案2】：

您可以通过在悬停事件处理程序中同时处理集合中的所有项目来实现此目的

var items = $(".some-class-applied-to-many-different-items");
items.hover(function() {
        // Mouseover state
        items.addClass("blah"); // <- for example
    },
    function() {
        // Mouseout state
        items.removeClass("blah");
});

【讨论】：

【解决方案3】：

如果我正确理解您的问题，您已经使用 jQuery 添加了 hover 事件，并且您希望手动触发该事件，而不管鼠标如何。

如果我理解正确，你想调用mouseenter来触发mouseenter事件。

如果我的理解有误，并且您实际上有一个 :hover CSS 规则，并且您想使用 Javascript 来触发它，那是不可能的。
相反，您应该在规则中添加一个类名（例如，something:hover, something.FakeHover { ... }），然后使用 jQuery 添加该类名。（例如，$(...).addClass('FakeHover')）。

【讨论】：

【解决方案4】：

在 jQuery 中，the trigger function 允许您在元素上触发事件（我相信包括mouseover）。

在纯 JavaScript 中，如果您已将函数分配给元素的事件处理程序，那么您当然可以随时调用它。例如

function mouseoverHandler() {
    // Do something
}

// Assign function to element’s event handler
document.getElementById('link1').onmouseover = mouseoverHandler

// Call that function
document.getElementById('link1').onmouseover();

【讨论】：

你甚至不需要trigger，调用没有回调函数的事件也可以，例如$('#foo').click();会触发#foo的点击事件。
对，但我认为这不适用于mouseover。根据the documentation，mouseover() 只是让您将函数绑定到元素的鼠标悬停事件。它不会让你触发事件。
即使文档没有提到它，它确实适用于mouseover。我检查了来源。
trigger.("mouseover") 无法更改 CSS 类，但可以为“mouseover”启动 jquery 函数。 stackoverflow.com/questions/17226676/…