Trigger the css:hover event with js

Question

I have <div class="animate"> and in css:

div.animate:hover{ //do stuff }

But would also like to invoke this via javascript.

Is it possible?

Have you looked here stackoverflow.com/questions/2228376/… ? — sleepwalker, CommentedMay 21, 2012 at 6:34

Community · Accepted Answer · 2017-05-23 11:46:40Z

As described in Trigger css hover with JS this is not possible as-is (if you want it as described exactly at the time of the creation of this answer).

But the main goal is achievable by:

Setting a class hover (or whatever name) as well as the selector :hover in the CSS.
Calling .addClass("hover") to trigger CSS, and .trigger("hover") or .trigger("mouseenter") to trigger the JS.
Ensuring the mouseleave handler. or 2nd .hover() handler, clears the hover class if present.

evancohen · Accepted Answer · 2012-05-21 11:29:00Z

Instead of doing it this way, I suggest you just add a class to the other tag. In jQuery it would be:

 $(window).load(function() { $('.trigger-animate').hover(function(){ $('.animate').addClass('hover'); }); }

I'd recommend using this method, because it handles both onMouseOver and onMouseOut (this way you can also remove the class when your mouse leaves $('.trigger-animate') if you so desired using this syntax:

.hover( handlerIn(eventObject), handlerOut(eventObject) ) checking out the documentation

I'm new to jQuery, would this go in the "onMouseOver" ? If not, where would I put this code — dukevin, CommentedMay 21, 2012 at 6:45
Put it in $(window).load -------- .hover is a replacement for onMouseOver, so you don't even need it! — evancohen, CommentedMay 21, 2012 at 11:30
Sorry, I'm still lost. Where do I put the .hover(...) in your second code snippet — dukevin, CommentedMay 22, 2012 at 22:10
The second snippet is just just the full syntactical documentation for the first. All you would need is the first one, and you could add a second function using the syntax of the second to handle when the mouse moves out. Hope that clears things up a bit. — evancohen, CommentedMay 30, 2012 at 17:54

Collectives™ on Stack Overflow

Trigger the css:hover event with js

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related