Javascript jQuery鼠标输入和鼠标离开不更新类

我在一个div上创建了一个背景图像，当用户将鼠标移到该图像上时，一个div将显示相关信息。我让它出现在鼠标进入时，并在鼠标离开时消失（）。每次它都会更新一个名为“slide”的类。但是，它只会更新类一次。只需使用它，而不需要额外的fadeOut（）函数，它就可以正常工作。我错过了什么

$（文档）.ready（函数（）{
$（“.fashion-img1”）.mouseenter（函数（）{
$（“.fashion-img-content1”）.toggleClass（“幻灯片”）；
});
$（“.fashion-img1”）.mouseleave（函数（）{
$（“.fashion-img-content1”）.fadeOut（1000，函数（）{
$（此）.toggleClass（“幻灯片”）；
});
});
});
.fashion-img-content1，
.fashion-img-content2，
.fashion-img-content3{
利润率：40%15%010%；
可见性：隐藏；
填充：20px；
最小高度：200px；
背景色：#f9f9f9；
颜色：#333；
}
slideanim先生{
可见性：隐藏；
}
.幻灯片{
动画名称：幻灯片；
-webkit动画名称：幻灯片；
动画持续时间：1s；
-webkit动画持续时间：1s；
能见度：可见；
}
@关键帧滑动{
0% {
不透明度：0；
转化：translateY（70%）；
}
100% {
不透明度：1；
转化：translateY（0%）；
}
}
@-webkit关键帧幻灯片{
0% {
不透明度：0；
-webkit转换：translateY（70%）；
}
100% {
不透明度：1；
-webkit转换：translateY（0%）；
}
}

泰勒斯·普雷森特·奥奇（Tellus purus praesent orci）、整数智人奥奇·奥奇（integer sapien a lorem orci augue）、埃利芬德前庭广场（eleifend Ventbalum quam）、普罗维登特·鲁图姆（provident rutrum）和罗迪克·杜伊斯（Ridiculu

泰勒斯·普雷森特·奥奇（Tellus purus praesent orci）、整数智人奥奇·奥奇（integer sapien a lorem orci augue）、埃利芬德前庭广场（eleifend Ventbalum quam）、普罗维登特·鲁图姆（provident rutrum）和罗迪克·杜伊斯（Ridiculu

泰勒斯·普雷森特·奥奇（Tellus purus praesent orci）、整数智人奥奇·奥奇（integer sapien a lorem orci augue）、埃利芬德前庭广场（eleifend Ventbalum quam）、普罗维登特·鲁图姆（provident rutrum）和罗迪克·杜伊斯（Ridiculu

Div ID必须是唯一的，而Div类是通用的。您当前正在为类指定唯一的名称，这就是为什么您的代码没有正确地针对DIV

此外，使用toggleClass可以在每次离开和重新进入时重新切换类，从而有效地撤消操作。因此，为了清晰起见，已将其更改为addClass和removeClass

最后，在使用淡出时，您将div的不透明度淡出为零，然后应用CSS
display:none将其从显示中删除。这与CSS
可见性不同：无正如@Daniel在评论中指出的那样

更新：更新片段以反映信息div淡入淡出

下面的代码片段演示了类切换和适当使用类名：


$（“.fashion img”）.mouseenter（函数（）{
$（this.find（“.fashion img content”）.addClass（“slide”）；
$（this.find（“.info”）.fadeIn（）；
});
$（“.fashion img”）.mouseleave（函数（）{
$（this.find（“.fashion img content”）.removeClass（“slide”）；
$（this.find（“.info”）.fadeOut（）；
});
。时尚img内容{
宽度：100px；
高度：100px；
背景：#333；
边缘顶部：10px；
}
.info{
显示：无；
位置：绝对位置；
}
.幻灯片{
背景：#09f；
}

Tellus purus praesent orci，integer sapien a lorem orci augue，arcu在eleifend前庭，provident rutrum ut ridiculus duis
Tellus purus praesent orci，integer sapien a lorem orci augue，arcu在eleifend前庭，provident rutrum ut ridiculus duis
Tellus purus praesent orci，integer sapien a lorem orci augue，arcu在eleifend前庭，provident rutrum ut ridiculus duis
可见性：隐藏
与
显示：无
或
不透明度：0
不同。拥有具有唯一类名的div并不意味着不能通过该类名选择它。你应该从你的答案中删除它，因为它既不正确又令人困惑。当然，在这种情况下，mouseenter和mouseleave函数需要为类名的每个变体重写，此外CSS样式的效率会更低：
.fashion-img-content1、.fashion-img-content2、.fashion-img-content3{
将成为CSS中的
.fashion img内容{
，允许以后进一步的内容。