Hover Item with JQuery

Question

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.

Hypogenous

What do you exactly mean by "hover the item"? Make it look different? – Beadledom

Answer 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.

Rideout

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

Maryannemarybella

Answer 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')).

Inly

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

Immobilize

You don't even need trigger, calling the event without callback function works as well, for example $('#foo').click(); will fire #foo's click event. – Rideout

Right, but I don’t think that works for mouseover. According to the documentation, mouseover() just lets you bind a function to an element’s mouseover event. It doesn’t let you trigger the event. – Immobilize

Even though the documentation doesn't mention it, it does work for mouseover. I check the source. – Inly

trigger.("mouseover") does not work to change the CSS class, but it does work to initiate a jquery function for "mouseover". #17227176 – Brechtel