Hover Item with JQuery

问题:

Is there a way to hover an element using javascript? I don't want to create another class, I just want to cause element to hover with javascript when my mouse pointer is not over that element.

For example I have 5 elements with the same class and I want to call hover on all of them when one of them is actually hovered.

回答1:

I assume you mean the pseudo class :hover that you've associated with a link (for example). As you hover over that link, you want to invoke all other link's :hover styles.

Unfortunately, you can not invoke the :hover styles from jQuery, that requires that you actually move your mouse pointer over that element. You have to use classes and utilize jQuery's hover event.

回答2:

You can achieve this by addressing all of the items in your collection at the same time in your hover event handlers

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:

If I understand your question correctly, you've added a hover event using jQuery, and you'd like to trigger that event manually regardless of the mouse.

If I understood correctly, you want to call the mouseenter to trigger the mouseenter event.

If I've understood incorrectly, and you actually have a :hover CSS rule which you'd like to trigger using Javascript, that's not possible.
Instead, you should add a class name to the rule (eg, something:hover, something.FakeHover { ... }), and add that class name using jQuery. (eg, $(...).addClass('FakeHover')).

回答4:

In jQuery, the trigger function allows you to trigger events (includingmouseover, I believe) on elements.

In straight JavaScript, if you’ve assigned a function to an element’s event handler, you can of course call that whenever you want. E.g.

function mouseoverHandler() {
    // Do something
}

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

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