在具有stopPropagation和/或preventDefault的元素上应用jQuery

Question

项目链接：

http://50.87.144.37/~projtest/wp/ziva/?page_id=7

我在页面上应用了owl-carousel来展示产品。布局是这样的：

当用户将鼠标悬停在产品上时，白色叠加层将会滑动，布局将如下所示：

我正在应用以下JS：

$('.owl-item .item').hover(function(){

    $(this).find('.itemHover').animate({
        top:0,
        opacity:1
        }, 700)
    setTimeout(function () {    

    $(this).find('.dressName, .dressLinks').animate({
        top:0,
        opacity:1
        },500)
    }, 501);

})

但它不起作用。这很可能是因为owl-carousel插件中有多个stopPropagation和preventDefault函数。有没有办法在产品上应用我想要的jQuery？

链接到插件的js：

http://50.87.144.37/~projtest/wp/ziva/wp-content/themes/ziva/js/owl.carousel.js

Answer 1

使用delegation尝试on，我的元素在代码运行时尚未就绪

$(document).on('mouseenter','.owl-item .item',function(){

});

$(document).on('mouseleave','.owl-item .item',function(){

});

Answer 2

好吧，如果你把这个代码放在index.css下面，你将使用CSS进行悬停效果。

.item:hover>.itemHover {
    top: 0;
    opacity: 1;
}

.item:hover>.itemHover>.dressName {
    top: 0;
    opacity: 1;
}

.item:hover>.itemHover>.dressLinks {
    top: 0;
    opacity: 1;
}

Answer 3

通过css3过渡做这些动画会更好（IE8及以下版本不支持）。 唯一的区别是，在那些旧浏览器中，动画不会出现，但功能将按预期工作。

将以下css规则添加到您的css文件中：

.itemHover {
    -webkit-transition: all 1s;
    -moz-webkit-transition: all 1s;
    transition: all 1s;
}

.owl-item:hover .itemHover {
    opacity: 1;
    top: 0;
}