Question: Here is my code

<http://jsfiddle.net/8fsmcc7b/>

And I pasted it below:

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

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

div:hover {
    width: 200px;
}
```

```html
<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: 
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");
});

```
[Hover](http://api.jquery.com/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>

```