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?

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?

• javascript
• html
• css

Share Follow edited May 2, 2015 at 7:29 dukevin asked May 21, 2012 at 6:31 dukevindukevin 23.2k3737 gold badges8787 silver badges114114 bronze badges 3

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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:

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

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 remend 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