6

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.

Maksim Vi.
  • 9,107
  • 12
  • 59
  • 85

4 Answers4

8

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.

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
4

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");
});
Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
2

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

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
0

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();
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 2
    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. – Tatu Ulmanen Dec 31 '09 at 00:07
  • Right, but I don’t think that works for `mouseover`. According to [the documentation](http://docs.jquery.com/Events), `mouseover()` just lets you bind a function to an element’s mouseover event. It doesn’t let you trigger the event. – Paul D. Waite Dec 31 '09 at 00:11
  • 1
    Even though the documentation doesn't mention it, it does work for `mouseover`. I check the source. – SLaks Dec 31 '09 at 00:17
  • trigger.("mouseover") does not work to change the CSS class, but it does work to initiate a jquery function for "mouseover". https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover – JohnP2 Oct 26 '17 at 14:05