使用 jQuery 悬停恢复到默认值答案

【问题标题】：restore to defaults with jQuery hover使用 jQuery 悬停恢复到默认值
【发布时间】：2017-02-21 04:50:46
【问题描述】：

我有以下代码：

JQUERY

$(document).ready(function() {
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    });
});

它可以工作，但我想在用户将鼠标移出#developer 区域时恢复默认值。

CSS

#coder {
    opacity: 1;
}

#my_pic {
    position: relative;
}

HTML

<div id="developer" class="threecol">
    <h1><span>&lt;</span>developer<span>&gt;</span></h1>
</div>

<div class="sixcol">
    <img id="my_pic" src="images/me.png" />
</div>

<div id="coder" class="threecol last">
    <h1><span>&lt;</span>coder<span>&gt;</span></h1>
</div>

【问题讨论】：

@Felix：标记太长。只是当我将鼠标悬停在#developer 上时，#coder 淡化为 0.4，#my_pic 动画向右：110px。即使我将鼠标移出#developer，它也会保持这种状态。
@Felix：我不是 jQuery 专家，但我相信 jQuery hover 有 on_mouse_in 和 on_mouse_out。所以不知何故，我必须为 on_mouse_out 部分编写一个函数。

标签： jquery html css hover

【解决方案1】：

只需将第二个function 用于hover

, function(){
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'0px'}, 500);            
}

FIDDLE

【讨论】：

【解决方案2】：

只需在hover 内的第一个函数之后附加另一个负责重置的函数：

$(document).ready(function() {
    $("#developer").hover(
        function() {
            $("#coder").fadeTo(1000,0.4);
            $("#my_pic").animate({right:'110px'}, 1500);
        }, function() {
            $("#coder").fadeTo(1000,1);
            $("#my_pic").animate({right:'0'}, 1500);
        });
});

【讨论】：

【解决方案3】：

$(document).ready(function() {
$("#developer").mouseout(function() {
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'110px'}, 1500);
});
});

【讨论】：

这需要设置 2 个函数...hover 负责两者，mouseover 和 mouseout...http://api.jquery.com/hover/

【解决方案4】：

试试这个

$(document).ready(function() {   
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    }, 
    function() {
        $("#coder").fadeTo(1000,1);
        $("#my_pic").animate({right:'0'}, 1500)
    });
});

DEMO

【讨论】：