Hover element 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 make an element hang with javascript when the 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 actually hangs.

Answer 1

I assume that you are referring to the :hover pseudo- :hover that you linked to the link (for example). When you hover over this link, you want to call all other link styles :hover .

Unfortunately, you cannot call :hover styles from jQuery, which requires the actual movement of the mouse pointer over this element. You must use classes and use the jQuery hover event.

Answer 2

You can achieve this by accessing all elements of your collection at the same time in 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"); }); 

Answer 3

If I understood your question correctly, you added the hover event using jQuery, and you want to fire this event manually, regardless of the mouse.

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

If I misunderstood, and you actually have a CSS :hover rule that you would like to run using Javascript, this is not possible.
Instead, you should add the class name to the rule (for example, something:hover, something.FakeHover { ... } ) and add this class name using jQuery. (e.g. $(...).addClass('FakeHover') ).

Answer 4

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

In direct JavaScript, if you have assigned a function to an element event handler, you can, of course, call it whenever you want. For example.

 function mouseoverHandler() { // Do something } // Assign function to element's event handler document.getElementById('link1').onmouseover = mouseoverHandler // Call that function document.getElementById('link1').onmouseover();