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
– sleepwalker, Commented May 21, 2012 at 6:34

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

6

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.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered May 21, 2012 at 6:41

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

1

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

edited May 21, 2012 at 11:29

answered May 21, 2012 at 6:42

evancohen

6771 gold badge5 silver badges9 bronze badges

5 Comments

dukevin Over a year ago

I'm new to jQuery, would this go in the "onMouseOver" ? If not, where would I put this code

evancohen Over a year ago

Put it in $(window).load -------- .hover is a replacement for onMouseOver, so you don't even need it!

dukevin Over a year ago

Sorry, I'm still lost. Where do I put the .hover(...) in your second code snippet

evancohen Over a year ago

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.

oldboy Over a year ago

is there no way to do this with vanilla JS?

Collectives™ on Stack Overflow

Trigger the css:hover event with js

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related