Javascript 为特定的悬停图像应用css

我试图为一个特定的悬停图像应用css，但是当只悬停一个图像时，我的代码为所有图像应用css

$（文档）.ready（函数（）{
$（'.vidUrl'）。在（'hover'，function（）上{
$（'.thumb overlay'）.toggle（）；
});
});
.thumb{
高度：100px；
宽度：100%；
对象匹配：覆盖；
}
.拇指覆盖{
背景图像：url（'http://www.denys.be/assets/images/play.png');
位置：绝对位置；
宽度：100%；
排名：0；
右：0；
左：0；
底部：0；
背景尺寸：封面；
背景色：#00000073；
显示：无；
}


$（文档）.ready（函数（）{
$（'.VIDEO\u PARENT\u CLASS'）。悬停（函数（）{
$（this.find（'.thumb overlay'）.toggle（）；
});
});
.thumb{
高度：100px；
宽度：100%；
对象匹配：覆盖；
}
.拇指覆盖{
背景图像：url（'http://www.denys.be/assets/images/play.png');
位置：绝对位置；
宽度：100%；
排名：0；
右：0；
左：0；
底部：0；
背景尺寸：封面；
背景色：#00000073；
显示：无；
}
这就是你要找的吗？


$（文档）.ready（函数（）{
$（'.vidUrl'）.hover（函数（）{
$（this.find（'.thumb overlay'）.toggle（）；
});
});
.thumb{
高度：100px；
宽度：100%；
对象匹配：覆盖；
}
.拇指覆盖{
背景图像：url（'http://www.denys.be/assets/images/play.png');
位置：绝对位置；
宽度：100%；
排名：0；
右：0；
左：0；
底部：0；
背景尺寸：封面；
背景色：#00000073；
显示：无；
}
在您编写的代码中。它将应用于所有图像，因为所有图像都具有名为“
”的相同类。thumb overlay”


$（文档）.ready（函数（）{
$（'.vidUrl'）。在（'hover'，function（）上{
$（'.thumb overlay'）.toggle（）；
});
});

您应按以下方式更改代码：

<script type="text/javascript">
        $(document).ready(function(){
            $('.vidUrl').on('hover', function(){
                $(this).find('.thumb-overlay').toggle();
            });
        });
    </script>


$（文档）.ready（函数（）{
$（'.vidUrl'）。在（'hover'，function（）上{
$（this.find（'.thumb overlay'）.toggle（）；
});
});

正如我们所知，
$（此）
指向当前对象。因此，它将仅在当前图像上应用CSS。
您好，谢谢您的回复。它确实对特定的悬停图像应用css，但是css一直在闪烁。结果仍然是一样的。我从inspect中选择了
.thumb overlay
样式保持切换
显示：无和
显示：块
@EatenTaik不客气，但实际上，使用CSS也可以实现这一点，如果您感兴趣，我可以帮助您，或者您也可以参考其他答案，CSS总是比脚本更好。：）
<script type="text/javascript">
        $(document).ready(function(){
            $('.vidUrl').on('hover', function(){
                $(this).find('.thumb-overlay').toggle();
            });
        });
    </script>