Here is my code
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?
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 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>
.hoverdoesn't work that way. But you could just add a class where you have your:hoverin the CSS and apply that to your element on hover.