-2

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Hanfei Sun
  • 45,281
  • 39
  • 129
  • 237
  • `.hover` doesn't work that way. But you could just add a class where you have your `:hover` in the CSS and apply that to your element on hover. – putvande Jun 17 '15 at 10:18
  • look [http://stackoverflow.com/questions/10680446/trigger-the-csshover-event-with-js][1] [1]: http://stackoverflow.com/questions/10680446/trigger-the-csshover-event-with-js – Pepo_rasta Jun 17 '15 at 10:22

2 Answers2

0

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");
});
Zander
  • 1,076
  • 1
  • 9
  • 23
-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>
Bellash
  • 7,560
  • 6
  • 53
  • 86