javascript - 是否有悬停或 mouseenter/mouseleave 的切换？

Question

我有一些 div 元素，每个元素中都包含一些 div 元素。所以我想在悬停时使这些 div 元素生效。我不确定使用 hover 或 mouseenter。例如，在 div 悬停时，它必须运行动​​画 am 向左移动或更改其颜色。但是即使我将鼠标移到其他地方，效果仍然存在，这不是我想要的。我希望它像 css hover 一样工作，在 mouseleave 后移回。<强> DEMO

这是我的代码:

$(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

<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>

有什么想法吗？

Answer 1

我会这样做

 $(document).ready(function(){
    $(".close").hide();
    $(".ln, .gw, .mc, .rt").hover(function(){
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).stop();
        $(name).animate({
            "margin-left": "100px"                        
         }, 500);

        $(classname).find(".close").stop();
        $(classname).find(".close").fadeIn(500);
    }, function(){
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).stop();
        $(name).animate({
            "margin-left": "0px"                        
         }, 500);

        $(classname).find(".close").stop();
        $(classname).find(".close").fadeOut(500);
    });
});

作为 jQuery 代码。修好了 ;)