Javascript 规则my'；悬停'；带有if语句的函数-jQuery

我需要在悬停（或鼠标悬停）时显示带有幻灯片效果的图像（'.tirellidrop'）。然后，当图像显示时，如果我单击我的容器，我将有另一个幻灯片切换

一切正常，但当我的第二张幻灯片可见时，我不希望悬停功能正常工作

因此：

我在我的元素-->'上移动鼠标。tirellidrop'滑出

我点击元素------>“.ttx_rosso”滑出，“.tirellidrop”保持可见，直到我再次点击元素

我添加了一个名为“visibile”的类，我写道：如果我的元素没有这个类，您可以将我的图像滑动到悬停状态。然后，如果我点击元素，得到第二个函数，这种情况就不会再发生了。但确实如此

if(!$('.ttx_rosso').hasClass('visibile')) {

    $(".tr_rosso").hover(function () {
        $(".tirellidrop").slideToggle("400");
    }, function () {
        $(".tirellidrop").slideToggle("400");
    });
}


$('.tr_rosso').click(function() {
    $(".ttx_rosso").slideToggle("slow").toggleClass('visibile');
}); 

---

请看第一个红色元素：

尝试搜索“停止传播”和“防止默认值”我知道停止传播，但我无法解决此问题