如何让父元素的jQuery .animate()动画不受子元素hover干扰？

你的问题根源在于mouseout事件的触发逻辑——当鼠标从父元素（#block-1）移到内部的<input>子元素时，mouseout会被误触发，导致父元素的反向动画提前执行，打断了悬停效果。下面是两种直接有效的解决办法：

方法一：替换事件为mouseenter/mouseleave #

这是最简洁的方案，mouseenter和mouseleave只会在鼠标真正进入/离开元素本身时触发，完全不会被子元素干扰。修改你的JS代码如下：

// Block-1 Animation Code.
$('#block-1').on("mouseenter",function(){
    $('#block-1').animate({
        'height':'450px',
        'width':'450px',
        opacity:1
    },100,'linear');
});
$('#block-1').on("mouseleave",function(){
    $('#block-1').animate({
        'height':'400px',
        'width':'400px',
        opacity:0.8
    },100,'linear');
});

// Block-2 Animation Code.
$('#block-2').on("mouseenter",function(){
    $('#block-2').animate({
        'height':'450px',
        'width':'450px',
        opacity:1
    },100,'linear');
});
$('#block-2').on("mouseleave",function(){
    $('#block-2').animate({
        'height':'400px',
        'width':'400px',
        opacity:0.8
    },100,'linear');
});

// Block-3 Animation Code.
$('#block-3').on("mouseenter",function(){
    $('#block-3').animate({
        'height':'450px',
        'width':'450px',
        opacity:1
    },100,'linear');
});
$('#block-3').on("mouseleave",function(){
    $('#block-3').animate({
        'height':'400px',
        'width':'400px',
        opacity:0.8
    },100,'linear');
});

方法二：在mouseout中判断鼠标位置 #

如果你坚持使用mouseover/mouseout，可以在mouseout事件里检查鼠标是否仍在父元素范围内，只有真正离开时才执行反向动画：

$('#block-1').on("mouseout",function(e){
    // 检查鼠标是否还停留在当前元素或其子元素内
    if (!$(this).has(e.relatedTarget).length) {
        $('#block-1').animate({
            'height':'400px',
            'width':'400px',
            opacity:0.8
        },100,'linear');
    }
});

额外的CSS语法修正 #

你的CSS里有几处语法错误，顺便帮你指出：

• font-size: 10px 10px 10px #000000; 写法错误，font-size仅需设置尺寸，颜色已通过color属性定义，这里改成font-size: 10px;即可。
• text-shadow: 50px; 语法错误，text-shadow至少需要两个值（水平偏移、垂直偏移），比如text-shadow: 1px 1px 3px rgba(0,0,0,0.5);，不需要阴影可直接删除该属性。

内容的提问来源于stack exchange，提问作者Chinmay Mishra