jQuery's `.hover()` method doesn't work for `:hover` CSS style?

Question

Here is my code

http://jsfiddle.net/8fsmcc7b/

And I pasted it below:

setTimeout(function(){$("div").hover()}, 1000)

div {
    background: grey;
    width: 20px;
}

div:hover {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    test
</div>

I want to use jQuery to trigger the hover event of <div>, which will expand its width to 200px.. However, in the example above, there is no effect at all..

Does anyone have ideas about this?

Answer 1

Hover binds mouseover and mouseout handlers! I Don't think It triggers mouseover event. If you want to apply a style you can do it by adding a class like bellow

 div:hover,div.hoverd {
  width: 200px;
}    
 <script>
setTimeout(function(){
   $("div").addClass('hoverd');
   setTimeout(function(){
   $("div").removeClass('hoverd');
  },1000)
 }, 1000)     
</script>

Answer 2

You can expand it by this simple way.

Create a CSS class with the 200px width (here you can add also CSS3 animations). Use .hover(handler1, handler2) function from jQuery or .mouseenter() / .mouseleave(). The first handler for hover function, will be for the mouse entering that element, and just add the class, and the second element for the mouse leaving it, so remove the class added before.

The first one mentioned, is like the two mouse events from before.

Edit to add example:

$(".div_to_expand").hover(function() {
    $(this).addClass("expanded");
}, function() {
    $(this).removeClass("expanded");
});