jQuery：组合单击和悬停功能的问题

我的网页目前看起来是这样的：

//悬停函数
$（“#cats_image”）.mouseover（函数（）{
$（“h1”）。文本（“猫”）；
});
$（“#狗#图像”）.mouseover（函数（）{
$（“h1”）。文本（“狗”）；
});
$（“#ducks_image”）.mouseover（函数（）{
$（“h1”）。文本（“鸭”）；
});
$（“img”）.mouseout（函数（）{
$（“h1”）。文本（“动物”）；
});
//点击功能
$（“#cats_image”）。单击（函数（）{
$（“h1”）。文本（“猫”）；
$（“footer div”）.removeClass（“show”）；
$（“#cats_text”）.addClass（“show”）；
});
$（“#狗#图像”）。单击（函数（）{
$（“h1”）。文本（“狗”）；
$（“footer div”）.removeClass（“show”）；
$（“#dogs_text”）.addClass（“show”）；
});
$（“#ducks_image”）。单击（函数（）{
$（“h1”）。文本（“狗”）；
$（“footer div”）.removeClass（“show”）；
$（“#ducks_text”）.addClass（“show”）；
});
*{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：正常；
}
标题{
宽度：100%；
}
主{}
img{
最大宽度：200px；
光标：指针；
}
页脚分区{
显示：无；
}
.表演{
显示：块；
}

动物
家猫因其伙伴关系和捕杀啮齿动物的能力而受到人类的重视。
家养狗的皮毛有两种：一种是“双毛”，熟悉来自寒冷气候的狗（以及狼），由粗糙的警卫组成。
鸭是鸭科水禽中许多物种的共同名称，也包括天鹅和鹅。
由于您在mouseout事件中将标题设置为
Animals
，因此它不起作用。
也就是说，您确实需要像下面的代码行一样设置标题的全局值


let selected_animal=“Animals”
//悬停函数
$（“#cats_image”）.mouseover（函数（）{
$（“h1”）。文本（“猫”）；
});
$（“#狗#图像”）.mouseover（函数（）{
$（“h1”）。文本（“狗”）；
});
$（“#ducks_image”）.mouseover（函数（）{
$（“h1”）。文本（“鸭”）；
});
$（“img”）.mouseout（函数（）{
$（“h1”）。文本（选定的动物）；
});
//点击功能
$（“#cats_image”）。单击（函数（）{
选定的动物=“猫”
$（“h1”）。文本（“猫”）；
$（“footer div”）.removeClass（“show”）；
$（“#cats_text”）.addClass（“show”）；
});
$（“#狗#图像”）。单击（函数（）{
选定的动物=“狗”
$（“h1”）。文本（“狗”）；
$（“footer div”）.removeClass（“show”）；
$（“#dogs_text”）.addClass（“show”）；
});
$（“#ducks_image”）。单击（函数（）{
选定的动物=“鸭子”
$（“h1”）。文本（“鸭”）；
$（“footer div”）.removeClass（“show”）；
$（“#ducks_text”）.addClass（“show”）；
});
*{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：正常；
}
标题{
宽度：100%；
}
主{}
img{
最大宽度：200px；
光标：指针；
}
页脚分区{
显示：无；
}
.表演{
显示：块；
}

动物
家猫因其伙伴关系和捕杀啮齿动物的能力而受到人类的重视。
家养狗的皮毛有两种：一种是“双毛”，熟悉来自寒冷气候的狗（以及狼），由粗糙的警卫组成。
鸭是鸭科水禽中许多物种的共同名称，也包括天鹅和鹅。
Thaaaanks！看起来不错！缺少一点：如果在白色区域中单击，则应显示初始状态。使用“$（“*”）执行此操作。很遗憾，单击（函数（）”不起作用。：/为此，请在整个文档中添加一个单击事件，重置所有内容，并将动物图像中的单击事件告知
事件.stopPropagation（）；
，这样，单击不会使DOM冒泡并触发对身体的单击（例如，使用
$（'body'）
）