I have a series of div elements, each containing several nested div elements. I would like to add hover effects to these div elements. However, I am unsure whether to use the hover or mouseenter function. For instance, when hovering over a div, I want it to animate and move to the left or change color. The issue is that the effect persists even when moving the mouse elsewhere, which is not what I desire. I want it to behave like CSS hover, reverting back after the mouse leaves. DEMO
Below is my code:
$(document).ready(function(){
$(".close").hide();
$(".ln, .gw, .mc, .rt").hover(function(){
var classname = $(this).parent();
var name = $(classname).children(':first-child').next();
$(name).animate({
"margin-left": "100px"
}, 500);
$(classname).find(".close").fadeIn(500);
});
});
HTML Code
<div class="item1">
<div class="name1 ln">name 1</div>
<div class="name2 ln">name 2</div>
<div class="name3 ln">name 3</div>
<div class="close">close</div>
</div>
<div class="item2">
<div class="name4 gw">name 1</div>
<div class="name5 gw">name 2</div>
<div class="name6 gw">name 3</div>
<div class="close">close</div>
</div>
<div class="item3">
<div class="name7 mc">name 1</div>
<div class="name8 mc">name 2</div>
<div class="name9 mc">name 3</div>
<div class="close mc">close</div>
</div>
<div class="item4">
<div class="name10 rt">name 1</div>
<div class="name11 rt">name 2</div>
<div class="name12 rt">name 3</div>
<div class="close">close</div>
</div>
Any suggestions for improvement?