使用 JQuery 悬停项目

Question

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

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

Answer 1

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

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

Answer 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");
});

Answer 3

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

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

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

Answer 4

在 jQuery 中，trigger 函数允许您触发事件（我相信包括鼠标悬停）在元素上。

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

function mouseoverHandler() {
    // Do something
}

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

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